在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最后显示的时候再一次拿回数组来显示！
分享到：
相关推荐
5. 同步更新：无论是哪种方法，在用户选择了自定义下拉菜单中的某个选项后，需要同步更新原生select中的选中项，并且将选中项的值显示在自定义下拉菜单上。 下面，我们将进一步详细介绍用JavaScript来美化HTML的...
需要注意的是，虽然这种方法可以解决IE的显示问题，但在现代浏览器中，原生的Select元素通常有更好的性能和可用性。因此，为了兼顾兼容性和性能，我们可以使用条件注释或者特性检测来决定是否使用模拟Select。对于...
这个技术主要依赖于JavaScript（JS）和CSS3来实现，而“模拟select点击显示下拉菜单.zip”文件中的示例正是这样一个实践案例。 首先，我们来探讨CSS3的作用。CSS3是层叠样式表的最新版本，它引入了许多新的特性和...
在这个场景中，"d3实现部分关系隐藏与显示"是一个关于如何利用D3.js来动态控制图表中特定关系的可见性的主题。这个功能在展示复杂网络图或关系图时特别有用，因为它可以帮助用户更专注于他们关心的数据子集，提高...
### 如何实现在`<select>`中选择一个`<option>`后显示相关的内容 #### 场景概述 根据所提供的信息，我们面临的问题是：当用户从一个`<select>`元素中选择一个`<option>`时，希望能在页面的某个区域内显示与所选`...
在前端开发中，"select框模糊查询方法"是一种常见的用户交互功能，允许用户在下拉选择框中输入关键字，快速找到并选择匹配项。这样的功能极大地提升了用户体验，尤其是在选项众多时，用户不再需要逐个滚动查找，而是...
在网页开发中，实现下拉菜单（select）的联动效果是一种常见的交互设计，它使得用户在选择一个选项时，另一个下拉菜单会根据选择自动更新其显示内容。在这个例子中，我们看到的是如何通过JavaScript库jQuery来实现...
总的来说，"select下拉带模糊搜索功能"是通过HTML和JavaScript实现的一种增强型下拉选择组件，它利用模糊搜索算法提高了用户在大量选项中的查找效率。开发者在实现时需关注交互设计、性能优化和兼容性，以提供优秀的...
1. **模拟`select`**：通过使用HTML、CSS和JavaScript创建一个看起来像`select`的元素，然后使用JavaScript处理点击事件，动态显示和隐藏自定义的下拉菜单。这种方法可以实现高度定制，但需要更多的代码和维护。 2....
本文通过一个具体的示例代码，详细解析了如何在Java Web项目中根据不同的条件隐藏和显示页面元素。这种方法不仅能够提高用户体验，还可以增强应用程序的功能性。对于初学者来说，理解这些基本原理和技术实现方式是...
本文将深入探讨如何使用 JavaScript 和 HTML 中的 `select` 元素来控制网页内容的隐藏与显示。 首先，我们来看一下给出的代码片段： ```html function setChange() { if (document.f.selfs.value == "1") { ...
它可能被用来处理用户交互，如点击事件，以及控制下拉菜单的显示和隐藏。此外，JavaScript还可以帮助我们实现更复杂的逻辑，比如防止下拉菜单在不适当的时候关闭，或者在用户滚动页面时保持菜单的位置。 在压缩包中...
这通常涉及到DOM操作，包括获取`select`元素、遍历其所有`option`子元素，然后根据输入的关键词进行匹配，显示或隐藏匹配的选项。这种方式需要对HTML、CSS和JavaScript有较深入的理解，并且工作量相对较大。 2. **...
在网页设计和开发中，`select` 下拉框是一个常见的元素，用于用户选择预设的选项。然而，当选项数量庞大或包含大量中文文本时，传统的`select`下拉框可能无法满足用户友好的交互需求。为了提升用户体验，我们可以...
`selectedText`参数可以自定义被选中的选项显示的文本，而`selectpicker('hide')`则用于隐藏下拉框。 `bootstrap-select`插件还支持许多其他特性，如多选（multiple）、分组（groups）、禁用选项（disabled）、...
对于“SelectBox下拉复选框多选插件”，这意味着它是一个独立的JavaScript或CSS库，可以轻松集成到任何项目中，为下拉框添加多选和搜索功能。 5. **搜索功能**：此插件的一个关键特性是搜索功能。在大量选项的下拉...
在这个案例中，`<select>` 标签会被用来创建下拉列表，而图片和文字会作为选项的一部分显示出来。开发者可能使用了自定义的HTML5属性或者JavaScript来增强`<option>`元素，使其能够承载图片和文字信息。 2. **js** ...
3. **触发事件**：可能需要在特定事件（如鼠标悬停）上触发qTip的显示，或者在插件内部逻辑中控制提示的显示和隐藏。 三、具体实现 1. **HTML结构**：在`select.html`文件中，开发者可能创建了一个基本的HTML结构...
下面是一个简单的示例，展示如何在XSL文件中创建表格，以及如何在HTML中使用JavaScript实现行的隐藏和显示： ```xml <!-- test.xsl --> <xsl:output method="html" indent="yes"/> <html> function ...
JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面： 1. HTML结构设计：实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符，下拉框则是提供选项供...