转载自品略图书馆 http://www.pinlue.com/article/2018/11/2303/047596163137.html
在html中有一种情况，如果用户想隐藏现有页面的下拉框；但是问题是，当前页面的下拉框默认的有隐藏和显示的，那么面对这种情况可能是很多人都会想到有一个iframe来覆盖这些下拉框，这样就也了啊，可是这个是可以解决当前的问题了，可是这个好像不是最终的方案了，以下是一个显示和隐藏下拉框的简单demo，看看吧。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE> NewDocument </TITLE>
</HEAD>
<script>
var array = new Array();//用来保存为显示的select元素
//隐藏Select的元素
function hidden(){
var oSelect = document.getElementsByTagName_r("select");//获得所有的select
for(vari=0;i<oSelect.length;i++){
if(oSelect[i].style.display==""){
array.push(oSelect[i]); //把对象放入数组
oSelect[i].style.display="none";
}
}
}
//show显示Select的元素
function show(){
var oSelect = document.getElementsByTagName_r("select");//获得所有的select
for( var i=0;i<array.length;i++){
if(array[i].style.display){
oSelect[i].style.display="";
}
}
}
</script>
<BODY>
<selectname="test1">
<optionVALUE="1"SELECTED>宝马</option>
<optionVALUE="2">保时捷</option>
<optionVALUE="3"SELECTED>奔驰</option>
</select>
<select name="test2"style="display:none">
<optionVALUE="1"SELECTED>test01</option>
<optionVALUE="2">test02</option>
<optionVALUE="3"SELECTED>test03</option>
</select>
<select name="test3"style="display:none">
<optionVALUE="1"SELECTED>test501</option>
<optionVALUE="2">test502</option>
<optionVALUE="3"SELECTED>test503</option>
</select>
<selectname="test4">
<optionVALUE="1"SELECTED>test601</option>
<optionVALUE="2">test602</option>
<optionVALUE="3"SELECTED>test603</option>
</select>
<button οnclick="hidden();">hidden</button>
<buttonοnclick="show();">Show</button>
</BODY>
</HTML>
这个方法是用js的数组来保存显示的select最后显示的时候再一次拿回数组来显示！
