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

开始的时候需求是根据一定条件隐藏一部分<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下验证通过。