Question

我是Web设计HTML / CSS / JAvascript的初学者。

我有一个带有下拉列表和一些无序列表的表单（每个选项一个，全部隐藏）。我想根据下拉列表中的选定选项显示相应的列表。



<select id="dropdown" name="dropdown" >
    <option value=''> </options>
    <option value="option1"> option1 </option>
    <option value="option2"> option2 </option>
    <option value="option3"> option3 </option>
</select>

<ul id='option1' style='display:none'>
   <li> list option1 </li>
   <li> list option1 </li>
</ul>

<ul id='option2' style='display:none'>
   <li> list option2</li>
   <li> list option2 </li>
</ul>

<ul id='option3' style='display:none'>
   <li> list option3</li>
   <li> list option3 </li>
</ul>

这是一个示例，我有20多个选项，而且由于数字会不断演变，因此我无法以if-else模式进行编码。

有人可以帮助我。

谢谢。

PS：我只使用javascript（没有Jquery）

Answer 1

我建议使用一个类来隐藏元素。然后，您可以使用javascript添加和删除类。用display:none添加和删除类的原因是为了迎合具有非块显示的元素。

//Get the lists and store in a variable
let optionLists = document.querySelectorAll("ul[id^=option]");
//Set a contant for the class, if we change the class name we only have to change it once
const HIDDEN_CLASS = "hidden";

//Set an event handler on the dropdown
document.getElementById("dropdown").addEventListener("change", function(){
  //Selected Value
  var val = this.value;
  //Loop through the lists
  for(var i = 0; i < optionLists.length; i++) {
    //If the list has the matching ID
    if(optionLists[i].id === val){
      //Remove the hidden class
      optionLists[i].classList.remove(HIDDEN_CLASS);
    //Otherwise if the list does not have the hidden class
    }else if(!optionLists[i].classList.contains(HIDDEN_CLASS)){
      //Add the hidden class
      optionLists[i].classList.add(HIDDEN_CLASS);    
    }
  }
})

.hidden {display:none;}

<select id="dropdown" name="dropdown" >
    <option value=''> </option>
    <option value="option1"> option1 </option>
    <option value="option2"> option2 </option>
    <option value="option3"> option3 </option>
</select>

<ul id='option1' class="hidden">
   <li> list option1 </li>
   <li> list option1 </li>
</ul>

<ul id='option2' class="hidden">
   <li> list option2</li>
   <li> list option2 </li>
</ul>

<ul id='option3' class="hidden">
   <li> list option3</li>
   <li> list option3 </li>
</ul>

您也可以使用数据attributes在单个列表中执行此操作。请注意，即使li是display:list-item，此方法的基本原理仍然有效。

//Get the list items
let options = document.querySelectorAll("#options > li");
//Constant for the class
const HIDDEN_CLASS = "hidden";

//Add event listener to the dropdown
document.getElementById("dropdown").addEventListener("change", function(){
  //Selected value
  var val = this.value;
  //Loop throug the list items
  for(var i = 0; i < options.length; i++) {
    //Id the list item has a matching data attribute
    if(options[i].dataset.option === val){
      //Remove the hidden class
      options[i].classList.remove(HIDDEN_CLASS);
    //Otherwise id the list item does not have the hidden class  
    }else if(!options[i].classList.contains(HIDDEN_CLASS)){
      //Add it
      options[i].classList.add(HIDDEN_CLASS);    
    }
  }
})

.hidden {display:none;}

<select id="dropdown" name="dropdown" >
    <option value=''> </option>
    <option value="option1"> option1 </option>
    <option value="option2"> option2 </option>
    <option value="option3"> option3 </option>
</select>

<ul id="options">
   <li class="hidden" data-option="option1"> list option1 </li>
   <li class="hidden" data-option="option1"> list option1 </li>
   <li class="hidden" data-option="option2"> list option2</li>
   <li class="hidden" data-option="option2"> list option2 </li>
   <li class="hidden" data-option="option3"> list option3</li>
   <li class="hidden" data-option="option3"> list option3 </li>
   <li class="hidden" data-option="option2"> list option2 </li>
   <li class="hidden" data-option="option1"> list option1 </li>
   <li class="hidden" data-option="option3"> list option3</li>
</ul>

Answer 2

好，所以首先您需要在下拉列表更改时创建一个事件侦听器。然后，您将需要隐藏要显示的任何列表，最后根据下拉列表中选择的值显示所需的列表。

document.getElementById('dropdown').
    // Adding the event listener based on element id.
    addEventListener('change', (evt) => {
      // Hiding every list using a querySelector.
      document.querySelectorAll('ul').forEach(list => {list.style.display = 'none'});
      // Showing the needed list based on dropdown value.
      document.getElementById(evt.target.value).style.display = 'block';
    });

有效的Codepen：https://codepen.io/anon/pen/oRZBOV

Answer 3

var ddl = document.querySelector('#dropdown');
var prevEl;
function changeDDL(){
  if(prevEl){
     prevEl.style.display = "none";
   }
  var id = ddl.value;
  if(id){
    var el = document.querySelector('#'+id);
    el.style.display = "block";
    prevEl = el;
  }
}

<select id="dropdown" name="dropdown" onchange="changeDDL()">
    <option value=''> </options>
    <option value="option1"> option1 </option>
    <option value="option2"> option2 </option>
    <option value="option3"> option3 </option>
</select>

<ul id='option1' style='display:none'>
   <li> list option1 </li>
   <li> list option1 </li>
</ul>

<ul id='option2' style='display:none'>
   <li> list option2</li>
   <li> list option2 </li>
</ul>

<ul id='option3' style='display:none'>
   <li> list option3</li>
   <li> list option3 </li>
</ul>

如何基于Javascript中的选择选项隐藏/显示列表

3 个答案: