通过隐藏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"><Please Select></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"><Please Select></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>
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"><Please Select></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"><Please Select></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下验证通过。
一个人若不能在内心找到安宁，恐怕在哪里也无济于事。
