multiple div's shown with select option

Question

Im still kind of new to scripts, but i know what im trying to do is not impossible. im trying to use a select option to show div's, I have it currently so it shows 1 div at a time currently but I cannot get it to show 2 separate divs at the same time. so for example im trying to select option 1, and to unhide the same selected options that were selected. I tried what was suggested in "Can an Option in a Select tag carry multiple values?"

but none of it worked

<script>
            document
                .getElementByValue('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementByValue(this.value);
                    if (vis !== null) {
                        vis.className = 'initial';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>

<div class="header">
<select name="dropdown" id='target'>
<option value="temp1" value2="form1">option1</option>
<option value="temp2" value2="form2">option2</option>
</select>
</div>

<div class="temps">
<div id="temp1" class="initial"><?php include "temp1.php"; ?></div>
<div id="temp2" class="initial"><?php include "temp2.php"; ?></div>
</div>

<div class="forms">
<div id="form1" class="initial"><?php include "form1.php"; ?></div>
<div id="form2" class="initial"><?php include "form2.php"; ?></div>
</div>

yea that was a mistake i was see what would work by changing little bits here and there and forgot to change it back to document.getElementById — mengle, Jun 13 '17 at 09:48

score 1 · Accepted Answer · answered Jun 07 '17 at 08:04

document.getElementById('target').addEventListener('change', function () {
  let divs = document.querySelectorAll('.initial, .vis'); // grab all divs that have the class "initial" or "vis"
  
  for (let i = 0; i < divs.length; i++) {
    // loop over all divs
    let div = divs[i];
    if (div.classList.contains(this.value)) {
      // the div's class list contains the value of the select box, e.g. "option-1" or "option-2"
      div.classList.remove('initial');
      div.classList.add('vis'); // make the div visible
    } else {
      div.classList.add('initial');
      div.classList.remove('vis'); // otherwise make the divs invisible
    }
  }
  
});

.initial {
  display: none;
}

<div class="header">
  <select name="dropdown" id="target">
    <option value="option-1">option1</option>
    <option value="option-2">option2</option>
  </select>
</div>

<div class="temps">
  <div class="initial option-1">Temp 1</div>
  <div class="initial option-2">Temp 2</div>
</div>

<div class="forms">
  <div class="initial option-1">Form 1</div>
  <div class="initial option-2">Form 2</div>
</div>

thank you both, I ended going with Peter's script and it worked just as i was hoping. — mengle, Jun 13 '17 at 05:50

score 0 · Answer 2 · answered Jun 07 '17 at 07:59

your selector was wrong its document.getElementById() not a document.getElementByValue .And you are using querySelectorAll() its matching all the .vis class element ,so you need to iterate with forEach .And change the if condition with vis.length>0

document.getElementById('target').addEventListener('change', function() {

  var vis = document.querySelectorAll('.vis'),
    target = document.getElementById(this.value);
  if (vis.length > 0) {
    vis.forEach(function(a) {
      a.className = 'initial';
      console.log(a.outerHTML)
    })
  }
  if (target !== null) {
    target.className = 'vis';
  }
  console.log(target.outerHTML)
});

<div class="header">
  <select name="dropdown" id='target'>
<option value="temp1" value2="form1">option1</option>
<option value="temp2" value2="form2">option2</option>
</select>
</div>

<div class="temps">
  <div id="temp1" class="initial">
    <?php include "temp1.php"; ?>
  </div>
  <div id="temp2" class="initial">
    <?php include "temp2.php"; ?>
  </div>
</div>

<div class="forms">
  <div id="form1" class="initial">
    <?php include "form1.php"; ?>
  </div>
  <div id="form2" class="initial">
    <?php include "form2.php"; ?>
  </div>
</div>

multiple div's shown with select option

2 Answers2