`

通过隐藏option实现select的联动效果

jQueryASP.netSpringHibernateAjax 
阅读更多
　开始的时候需求是根据一定条件隐藏一部分<option>标签，类似联动效果，但是目前的html规范并没有为<option>提供隐藏的效果，因此常用的设置display或者visibility无效。网上大部分解决方案是删除<option>节点或<option>置空。这显然不能够满足需求。后来经过试验，选择了利用标签包装的解决方案，基本原理如下:
　　当<option>需要隐藏的时候，在<option>标签外包装一个<span>标签，再令<span>标签为不可见。
　　当<option>需要显示的时候，恢复其正常的状态，即，去掉外面的<span>标签。
　　由于比较懒，所以利用JQuery框架来操作DOM对象和CSS，代码如下:

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5     <title>Untitled Page</title>
6     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
7     <script type="text/javascript" language="javascript">
8         $(function(){
9             //Bind the change event
10             $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange);
11             $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange);
12         });
13    
14         //The change event of language dropdown-list
15         var eDropLangChange = function(){
16             //The selected value of the language dropdown-list.
17             var selectedValue = $(this).val();
18            
19             //show all options.
20             $("#dropFrame").children("span").each(function(){
21                 $(this).children().clone().replaceAll($(this));         //use the content of the <span> replace the <span>
22             });
23            
24             //Filter the data through selected value of language dropdown-list except <Please Select>.
25             //If the option is <Please Select>, it only needs to show all and hide nothing.
26             if(parseInt(selectedValue) != 0){       
27                 //hide the option whose parentid is not equal with selected value of language dropdown-list.
28                 //The <Please Select> option should not be hidden.
29                 $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){
30                     $(this).wrap("<span style='display:none'></span>");     //add a <span> around the <option> and hide the <span>.
31                 });
32             }
33         };
34        
35         //The change event of frame dropdown-list.
36         var eDropFrameChange = function(){
37             //Find the selected option of frame dropdown-list. set the value of language dropdown-list by selected parentid.
38             $("#dropLang").val($(this).children("option:selected").attr("parentid"));
39         };
40     </script>
41 </head>
42 <body>
43     <div>
44         <select id="dropLang">
45             <option selected="selected" value="0">&lt;Please Select&gt;</option>
46             <option value="1">Javascript</option>
47             <option value="2">Java</option>
48             <option value="3">C#</option>
49         </select>
50         <select id="dropFrame">
51             <option selected="selected" value="0">&lt;Please Select&gt;</option>
52             <option value="1" parentid="1">JQuery</option>
53             <option value="2" parentid="1">Prototype</option>
54             <option value="3" parentid="2">Struts</option>
55             <option value="4" parentid="2">Spring</option>
56             <option value="5" parentid="2">Velocity</option>
57             <option value="6" parentid="2">Hibernate</option>
58             <option value="7" parentid="3">ASP.NET MVC</option>
59             <option value="8" parentid="3">Castle</option>
60         </select>
61     </div>
62 </body>
63 </html>

    这样，通过上一个下拉框的选择过滤下拉框的内容，基本实现了隐藏<option>的效果，当然，也可以把这种方法利用在下拉框级联选择的功能上，无需Ajax。

　　该代码在IE6，IE7，Chrome2，Firefox3。5下验证通过。
分享到：
| js让表单只能输入数字
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    静态二级联动 select option

    静态二级联动 js 调取数据 带有 option 值

    jquery实现select互斥联动

    jquery实现select互斥联动，代码简洁易懂，方便使用，三个下拉框联动，选择互斥

    struts实现二级联动下拉框

    supplyInfo_add.jsp最简单,就是通过一级触发实现二级联动;supplyInfo_update.jsp稍微难了点,不仅仅是一级触发实现二级联动,还有它是将数据库中相应的省份城市提取出来,将原有增加的省份城市提取给用户,供用户修改;...

    vue select二级联动第二级默认选中第一个option值的实例

    下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    二级联动的实现

    实现二级联动 $(function(){ // 学院选框被选择请求专业信息内容，并写入dom var chooseUrl='getChoose.jsp';//定义专业信息获取页面地址，比如你要在xueyuan.jsp里面读取专业信息那么这里就填xueyuan.jsp。此页...

    一个年月日三下拉框联动实现JS代码

    一个年月日三下拉框联动实现JS代码 &lt;select name=YYYY onchange="YYYYMM(this.value)"&gt; &lt;option value=""&gt;请选择 年&lt;/option&gt; &lt;/select&gt; &lt;select name=MM onchange="MMDD(this.value)"&gt; &lt;option value=""&gt;选择 月&lt;/...

    ajax json select 多级联动

    动态创建option，采用json 对象解析后台动态数据。

    完全用asp实现二级菜单联动.doc

    完全用asp实现二级下拉框联动，asp实现二级菜单联动。文件内附详细源码， 部分源码预览：&lt;select name="select1" onChange="javascript:sel();"&gt; &lt;option value="=====请选择====="&gt;=====请选择===== if ch1=...

    JavaScript最新全国各省、市、县联动Select脚本

    JavaScript三级联通实现最新全国各省、市、县联动Select脚本,数据为最新全国全国各省、市、县数据，纯JavaScript实现。 部分代码如下： //这是从国家统计局网站下载的全国行政区划代码，先把他转化为JSON对象， //...

    实现省市区镇四级联动选择器（地址选择）

    由于学习要求，每次做注册，地址选择时，都需要省市区镇四级联动选择器 ,到网上下载很难找到合适的资源，即使有，但资源都是往年的，没有实时更新。

    JS中使用new Option()实现时间联动效果

    　先来了解下，如何运用js实现select动态添加option。 //1.动态创建select function createSelect(){ var mySelect = document.createElement(select); mySelect.id = mySelect; document.body.appendChild...

    jquery基于layui实现二级联动下拉选择(省份城市选择)

    先看一下简单的效果 直接上代码 html部分 (下拉框中value的数值我是根据数据库中取出来) 城市 &lt;select name=city lay-filter=province&gt; &lt;option xss=removed&gt;&lt;/option&gt; &lt;option value=11&gt;北京市&lt;/...

    【JavaScript源代码】js实现省市区三级联动非select下拉框版.docx

    js实现省市区三级联动非select下拉框版 　在网上搜三级联动发现都是用option写的，突发奇想用其他方式写了一个，自我感觉效果还不错，大家感兴趣的可以看看，不说废话，大家看效果　代码如下，小白写的有点乱，大家...

    jquery Ajax实现Select动态添加数据

    但是，这次要实现select与别的选项框联动，也就是要动态添加option数据。查阅了很多资料，终于搞定。下面就分享一下，如何利用jQuery和Ajax实现select动态添加数据。  2.本文代码实现的是车辆型号根据车辆品牌联动...

    yl_linkage_帝国CMS无限联动插件_

    仅供参考 多级联动，支持Ajax动态获取数据并缓存数据，动态生成下级select菜单，设置动态生成&quot;option&quot;第一个条目作为提示项，自动选择唯一选项的菜单，设置回调函数在onChange事件触发时获取下拉菜单相关...

    AJAX实现省市区三级联动

    使用AJAX从数据库中读取省、市、地区的数据，添加到select的option选项，实现自动筛选。

    纯js三维数组实现三级联动效果

    本文实例为大家分享了Android九宫...三级联动效果（纯JS实现） 专业方向： &lt;select name="sel1" id="sel1"&gt; &lt;option&gt;--请选择专业--&lt;/option&gt; &lt;option&gt;JAVA&lt;/option&gt;&lt;option&gt;PHP&lt;/option&gt;&lt;option&gt;UI&lt;/option&gt;

    JQuery打造省市下拉框联动效果

    用JQuery实现比较容易，代码以省市联动效果为例实现。JSP页面代码如下： 代码如下: ”base”&gt; 生源地:&lt;/p&gt; &lt;label&gt; &lt;select id=”provinceCode” name=”provinceCode” onchange=”refreshCity()”&gt; &lt;option ...

Magicbox
Global site tag (gtag.js) - Google Analytics