開始的時候需求是根據一定條件隱藏一部分<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下驗證通過。
