在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最后显示的时候再一次拿回数组来显示！
分享到：
相关推荐
下拉框内容过长，挡住显示内容。 select内容过长，显示内容无法全部显示。 下拉框内容过长，显示内容无法全部显示。
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title&...
Vue.js 再封装elSelect，实现多选，全选，反选，失去焦点并隐藏；点击空白处会自动收起下拉菜单
文章将会演示两种显示和隐藏GridView列的方法，一种是客户端的方法，另外一种是服务段的方法. 在客户段显示和隐藏GridView的列 大部分代码是在GridView的RowCreated事件生成客户端的功能的。当GridView的Header行...
select> ””>1</option> ””>2</option> ””>3</option> ””>4</option> ””>5</option> </select> 我不想让用户可以选择 345 怎么办呢 复制代码代码如下: <select> ””>1</option> ””>...
jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素，而 toggle() 方法则可以切换 hide() 和 show() 方法，也就是显示被隐藏的元素，并隐藏已显示的元素。 $(select).hide(); // 隐藏下拉框 $(select)....
如果它们在HTML标记中，则它们将显示在自定义标记中。 禁用字段-select现在可以识别禁用字段并使它们不可单击。 它由一个真正的选择框驱动，因此它将以表格形式传递值。 它的工作方式是代码将找到选择框并将其隐藏...
1.1将input输入框和select框合并在一起，但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方，当点击页面中的空白地方，div隐藏。 1.3代码： ...
其实select的实现原理很简单，就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了，样式想怎么写就怎么写，且不限数量。 朴素的效果： html： <div class=select_box> › 选项1 选项1 选项2 选项...
web页面中，我们一般不用select、option来实现下拉菜单效果，因为下拉框的样式丑且难以美化，所以我们选择控制ul显示隐藏来实现同样且高大上的效果，但是不能像下拉框那样点击页面其他部分，下拉菜单收起或隐藏，...
lhgdialog超强弹窗控件，支持遮罩，缩放、拖动，随...7、为lhgdialog.show增加隐藏指定select或者不隐藏或者隐藏全部的参数（演示14） 原版地址:http://www.cnblogs.com/lhgstudio/archive/2009/03/26/1386048.html
使用HTML开发商业网站 表单控件-Input控件 ...input控件在页面中的显示宽度 readonly readonly 该控件内容为只读（不能编辑修改） disabled disabled 第一次加载页面时禁用该控件（显示为灰色） chec
1 所属部门选择其他时 显示一个输入框进行填写 #html <select id='deptid' name='deptid' class=select onchange='deptChange()'> ${deptidList} varStatus=status> ${item.value}'> ${item.name} &...
目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。 知识点： 组件的写法及运用 组件之间的数据传递（props的运用） 组件之间的数据传递（$emit的运用） 动态数据的绑定（v-bind） 自定义事件...
作用：保留源文档中的回车 和 空格 的作用 <pre></pre> 8、分区元素 1、块分区元素 语法：<div></div> 作用：布局 2、行内分区元素 语法：<span></span> 作用：设置同一行文字内的不同样式 9、行内元素 与...
11、支持代码显示、引用显示、隐藏文字功能显示；12、去掉DIV下拉，返回select下拉，半兼容所有浏览器；13、精简大部分编辑JS代码，美化所有编辑器图标，整体更加美观，体积更小，加载更快，调用更方便；12、提供...
程序中为了更美观会自动去掉新table上面和下面的边框，包括frame和style的： Code if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable...
5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并...
5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并...