Question

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

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

Answer 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来使用像hide，show这样的函数。每次在下拉列表中触发更改时，div中包含类：“hideAndShow”的所有div都将被隐藏。在此之后，我会显示已选择检索所选值的div。

下拉即可立即切换信息

2 个答案: