HTML中Select的隐藏与显示

付松林 2016-10-20

展开全文

在html中有一种情况，如果用户想隐藏现有页面的下拉框；但是问题是，当前页面的下拉框默认的有隐藏和显示的，那么面对这种情况可能是很多人都会想到有一个iframe来覆盖这些下拉框，这样就也了啊，可是这个是可以解决当前的问题了，可是这个好像不是最终的方案了，以下是一个显示和隐藏下拉框的简单demo，看看吧。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script>
var array = new Array();//用来保存为显示的select元素
//隐藏Select的元素
function hidden(){
   var oSelect = document.getElementsByTagName_r('select');//获得所有的select
   for(var i=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>
<select name="test1">
   <option VALUE="1" SELECTED>宝马</option>
   <option VALUE="2">保时捷</option>
   <option VALUE="3" SELECTED>奔驰</option>
</select>
<select name="test2" style="display:none">
   <option VALUE="1" SELECTED>test01</option>
   <option VALUE="2">test02</option>
   <option VALUE="3" SELECTED>test03</option>
</select>

<select name="test3" style="display:none">
   <option VALUE="1" SELECTED>test501</option>
   <option VALUE="2">test502</option>
   <option VALUE="3" SELECTED>test503</option>
</select>

<select name="test4">
   <option VALUE="1" SELECTED>test601</option>
   <option VALUE="2">test602</option>
   <option VALUE="3" SELECTED>test603</option>
</select>
<button onclick='hidden();'> hidden</button>
<button onclick='show();'>Show</button>
</BODY>
</HTML>

这个方法是用js的数组来保存显示的select最后显示的时候再一次拿回数组来显示！
原文链接：http://elvishehai./blog/501261