複数のdivが選択オプションで表示されます

Question

まだまだ新しいスクリプトですが、何をしようとしているのかは分かりません。私はdivを表示するために選択オプションを使用しようとしていますが、現在は1 divを表示していますが、同時に2つのdivを表示することはできません。たとえば、オプション1を選択しようとしていて、選択されたものと同じ選択されたオプションを再表示しようとしています。 私は「Can an Option in a Select tag carry multiple values?」

で示唆されたものをしようとしたが、それのどれもが、あなたの選択はあなたがすべてのquerySelectorAll()のマッチングを使用しているそのdocument.getElementById()ないdocument.getElementByValue .AND間違っていた

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

Answer 1

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>

Answer 2

を働いていません.visクラス要素なので、forEachを繰り返し実行する必要があります。また、if条件を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>