javascript - 如何根据下拉列表显示 id？

Question

我正在尝试在我的家庭网站上创建一个圣诞节列表页面，我希望它有一个下拉列表，其中包含所有拥有列表的人，当您单击某人的名字时，它会显示他们的列表。我在想一些使用 display: none 和 display: block 的东西。但我真的不确定该怎么做，我从来没有真正做过这种事情。

如果有人发布解决方案，我宁愿它不是 JQuery，因为我不太了解它。但是，这只是一种偏好，非常感谢任何帮助。

Answer 1

你的想法是正确的。有很多方法可以做到这一点，但这里有一种方法可以显示正确的列表并隐藏所有其他列表。

// Get references to the elements in question
var people = document.getElementById("people");

// Get all the lists in a collection and convert that collection to an Array
var allLists = Array.prototype.slice.call(document.querySelectorAll(".list"));

// Set up a change event handler on the drop down list
// so that when the selection in the drop down changes, 
// the associated function will execute
people.addEventListener("change", function(){

  // Store the currently selected person
  var person = this.value;

  // Loop through all the lists and show the matching one and hide all the others
  allLists.forEach(function(list){
    if(person === list.id){
      list.classList.remove("hidden");
    } else {
      list.classList.add("hidden");
    }
  });
  
});

/* Set all lists to be hidden by default */
.hidden.list { display:none; }

<select id="people">
 <option value="">--- Choose A Person ---</option>
 <option value="tom">Tom</option>
 <option value="mary">Mary</option>
 <option value="sue">Sue</option> 
</select>

<div id="tom" class="hidden list">
  <h1>Tom's List</h1>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>    
  </ul>
</div>

<div id="mary" class="hidden list">
  <h1>Mary's List</h1>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>    
  </ul>
</div>

<div id="sue" class="hidden list">
  <h1>Sue's List</h1>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>    
  </ul>
</div>