以文本方式查看主题

-  智睿软件_技术交流论坛  (http://zhirui.net/bbs/index.asp)
--  Web页面设计  (http://zhirui.net/bbs/list.asp?boardid=33)
----  如何用js通过下拉菜单来实现div的隐藏和显示  (http://zhirui.net/bbs/dispbbs.asp?boardid=33&id=3692)
--  作者：zhirui
--  发布时间：2015-12-18 09:47:28
--  如何用js通过下拉菜单来实现div的隐藏和显示

思路：利用value属性获取下拉菜单的选项→根据选项决定div的状态→利用style.display样式隐藏或显示div。实例演示如下：

1、HTML结构

<select id="test_select">
	<option value="1">显示</option>
	<option value="2">隐藏</option>
</select>
<div id="test">我是一个div么呀我是一个div</div>

2、javascript代码

window.onload = function(){
	var obj_select = document.getElementById("test_select");
	var obj_div = document.getElementById("test");
	obj_select.onchange = function(){
		obj_div.style.display = this.value==1? "block" : "none";
	}
}