2.给每个下拉框对应的按钮加nomouseclick事件
3.事件中,先选择出display:block的下拉框,设置其display:none然后再把当前下拉框设置为display:block
这个用JQUERY做起来比较简单
1.把全部下拉框设置为display:none
2.加一个类
.current
{
display:block
!important}
3.JQUERY代码如下
$(document).ready(function(){
$("#下拉框的ID").click(function(){
$(".current").removeClass("current")
$(this).addClass("current")
})
})
思路:利用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"
}
}
3、效果演示