我正在寻找写一个HTML页面,它有一个下拉菜单和一些内容。例如,下拉菜单中列出了每周七天,并根据哪一天选择一个div来包含当天的活动。我知道如何使这项工作,以便您可以选择你想要的一天,按下按钮,然后浏览器加载一个新的页面与所需的信息。我该如何去编写它,这样一旦用户点击下拉菜单条目,页面的信息就会改变。我在想,也许我可以将信息存储在一堆隐藏的div中,只要点击下拉菜单的条目,就可以换入和换出。但是,我不确定如何在选定的下拉菜单中捕获条目的事件。下拉即时切换信息
Q
下拉即时切换信息
0
A
回答
0
我在想,也许我可以存储在一堆隐藏层的是,当点击下拉菜单条目,可进出交换的信息。
您还可以使用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>
0
我会建议你使用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检索选定的值。
相关问题
- 1. 使点击时jQuery下拉切换?
- 2. 传递信息切换
- 3. 使用jQuery切换信息
- 4. Twitter引导下拉切换
- 5. 从ABRecordRef检索即时消息信息
- 6. bootstrap html css切换更多信息格
- 7. jQuery的切换最接近的信息
- 8. 拉动信息
- 9. 下拉,在每一行(PHP)2信息
- 10. 使用下拉选择过滤信息
- 11. 失去鼠标下拉列表信息
- 12. 从下拉列表中访问信息
- 13. 存储下拉菜单的信息
- 14. div视觉从下拉菜单切换
- 15. 下拉菜单/切换(纯CSS/HTML)
- 16. 引导导航栏下拉不切换
- 17. Javascript下拉菜单切换Onclick
- 18. 切换链接下拉不工作
- 19. 如何切换下拉箭头
- 20. jQuery的切换下拉菜单
- 21. 生成CSS切换到下拉菜单?
- 22. 下拉式复选框不能切换
- 23. 下拉多选复选标记切换
- 24. jqGrid切换字段从文本下拉
- 25. 切换下拉答案的三角形
- 26. jquery下拉菜单,切换类
- 27. 动态jQuery切换下拉列表
- 28. 切换下拉列表可见性
- 29. 切换两个下拉面板
- 30. Angular Bootstrap下拉切换不起作用
这看起来很有希望,但事件监听器似乎没有被触发。 – keybored 2011-04-11 18:54:56
想通了,我改变了javascript的addEventListener(),直接添加一个onchange事件到select标签。谢谢! – keybored 2011-04-11 19:01:13
'事件监听器似乎没有被触发'你使用Internet Explorer? IE需要'day.attachEvent(“onchange”,change_day);“' – atlavis 2011-04-11 19:13:16