在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 οnclick='hidden();'> hidden</button>
<button οnclick='show();'>Show</button>
</BODY>
</HTML>
这个方法是用js的数组来保存显示的select最后显示的时候再一次拿回数组来显示！
代码如下：
<!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 οnclick='hidden();'> hidden</button>
<button οnclick='show();'>Show</button>
</BODY>
</HTML>
这个方法是用js的数组来保存显示的select最后显示的时候再一次拿回数组来显示！
1880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
