即时切换信息的下拉菜单

发布于 2024-11-01 06:22:38 字数 234 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

妄司 2024-11-08 06:22:38

我在想也许我可以将信息存储在一堆隐藏的 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>

I was thinking that maybe I could store the info in a bunch of hidden divs that, upon clicking on the drop down menu's entry, could be swapped in and out.

You can also use AJAX to load data.

I'm not sure, however, how to capture the event of an entry in a drop-down menu being selected.

JavaScript has lots of events: http://www.w3schools.com/jsref/dom_obj_event.asp

I've done poor example using divs:

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

回复收藏 0 原文

死开点丶别碍眼 2024-11-08 06:22:38

如果您有这样的静态数据，我建议您使用 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 中具有类：“hideAndShow”的所有 div 都会隐藏。之后，我显示已选择的 div 并检索所选值。

I would recommend you to use jQuery to achieve some show/hide tricks if you have static data like this.

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

If you take a look at the code, you can see I load jQuery to use function like, hide/show.
Everytime a change is triggered on the drop down list, all the div in the div with the class : "hideAndShow" are hidden. Right after that, I show the div that has been selected retrieving the selected value.

回复收藏 0 原文

~没有更多了~