javascript如何实现多个下拉框或隐藏层的显示隐藏

JavaScript020

javascript如何实现多个下拉框或隐藏层的显示隐藏,第1张

1.全部下拉框的display:none

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、效果演示