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?](https://stackoverflow.com/questions/3245967/can-an-option-in-a-select-tag-carry-multiple-values)"

but none of it worked

```js
<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>
```

```html
<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>
```
['https://Stackoverflow.com/questions/44406544', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/8112511/']
```js
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
    }
  }

});
```

```css
.initial {
  display: none;
}
```

```html
<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>
```
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`

```js
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)
});
```

```html
<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>
```