html中select的隐藏和显示

elvishehai · 发表于 2013-2-7 16:04:30

在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('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('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最后显示的时候再一次拿回数组来显示！

		自动登录	找回密码
密码			立即注册