通過隱藏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下驗證通過。