立即切换信息的下拉菜单答案

【问题标题】：Drop down that instantly switches info立即切换信息的下拉菜单
【发布时间】：2011-04-11 17:53:20
【问题描述】：

我正在寻找一个 html 页面，上面有一个下拉菜单和一些内容。例如，一个下拉菜单列出了一周中的 7 天，并且根据选择的哪一天，一个 div 包含当天的活动。我知道如何进行这项工作，以便您可以选择所需的日期，按下按钮，然后浏览器会加载包含所需信息的新页面。我将如何编写它，以便用户单击下拉菜单条目后页面的信息就会改变。我在想，也许我可以将信息存储在一堆隐藏的 div 中，单击下拉菜单的条目后，可以将其换入和换出。但是，我不确定如何捕获下拉菜单中的条目被选中的事件。

【问题讨论】：

标签： javascript html drop-down-menu

【解决方案1】：

我在想，也许我可以将信息存储在一堆隐藏的 div 中，点击下拉菜单的条目后，可以将其换入和换出。

您也可以使用 AJAX 来加载数据。

但是，我不确定如何捕获下拉菜单中的条目被选中的事件。

JavaScript 有很多事件：http://www.w3schools.com/jsref/dom_obj_event.asp

我用 div 做了很差的例子：

<html>
<body>

<select id="day">
  <option>Mon</option>
  <option>Tue</option>
  <option>Wed</option>
  <option>Thu</option>
  <option>Fri</option>
  <option>Sat</option>
  <option>Sun</option>
</select>

<div id="Mon">Mon contents</div>
<div id="Tue" style="display: none;">Tue contents</div>
<div id="Wed" style="display: none;">Wed contents</div>
<div id="Thu" style="display: none;">Thu contents</div>
<div id="Fri" style="display: none;">Fri contents</div>
<div id="Sat" style="display: none;">Sat contents</div>
<div id="Sun" style="display: none;">Sun contents</div>

<script>
 var day = document.getElementById ( "day" );  
 var current_day = day.value;

 function change_day ()
 {
   document.getElementById(current_day).style.display = "none";
   document.getElementById(day.value).style.display = "block";
   current_day = day.value;
 }

 day.addEventListener("change", change_day);  

</script>
</body>
</html>

【讨论】：

这看起来很有希望，但事件监听器似乎没有被触发。
想通了，我将 javascript 从具有 addEventListener() 更改为仅将 onchange 事件直接添加到 select 标记。谢谢！
event listener doesn't seem to be getting triggered 你使用 Internet Explorer 吗？ IE需要day.attachEvent("onchange", change_day);"

【解决方案2】：

如果你有这样的静态数据，我建议你使用 jQuery 来实现一些显示/隐藏技巧。

    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
  <style type="text/css">
  .hidden{ display:none; }
  </style>
</head>
<body>
  <button>Toggle</button>
<div class="hideandshow">
    <div class="hidden" id="content1">Content 1</div>
    <div class="hidden" id="content3">Content 3</div>
    <div class="hidden" id="content4">Content 4</div>
</div>
<select id="select">
    <option value="">Select something to show</option>
    <option value="content1">Show Content 1</option>
    <option value="content3">Show Content 3</option>
    <option value="content4">Show Content 4</option>
</select>
<script>
$("#select").change(function () {
    $(".hideandshow div").hide();
    var divToShow = $("#select option:selected").val();
    if(divToShow == "")
        return;
    $("#" + divToShow).show();
});
</script>
</body>
</html>

如果您查看代码，您会看到我加载 jQuery 以使用隐藏/显示等功能。每次在下拉列表中触发更改时，div 中具有 class : "hideAndShow" 的所有 div 都将被隐藏。紧接着，我显示已选择的 div 以检索选定的值。

【讨论】：