<div class="codetitle"> <span><a style="CURSOR: pointer" data="50100" class="copybut" id="copybut50100" onclick="doCopy('code50100')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code50100"> <br> <br> <br> <br><title>Untitled Page</title> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <br><script type="text/javascript" language="javascript"> <BR>$(function(){ <BR>//Bind the change event <BR>$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); <BR>$("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange); <BR>}); <br><br>//The change event of language dropdown-list <BR>var eDropLangChange = function(){ <BR>//The selected value of the language dropdown-list. <BR>var selectedValue = $(this).val(); <br><br>//show all options. <BR>$("#dropFrame").children("span").each(function(){ <BR>$(this).children().clone().replaceAll($(this)); //use the content of the <span> replace the <span> <BR>}); <br><br>//Filter the data through selected value of language dropdown-list except <Please Select>. <BR>//If the option is <Please Select>, it only needs to show all and hide nothing. <BR>if(parseInt(selectedValue) != 0){ <BR>//hide the option whose parentid is not equal with selected value of language dropdown-list. <BR>//The <Please Select> option should not be hidden. <BR>$("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){ <BR>$(this).wrap("<span style='display:none'>"); //add a <span> around the <option> and hide the <span>. <BR>}); <BR>} <BR>}; <br><br>//The change event of frame dropdown-list. <BR>var eDropFrameChange = function(){ <BR>//Find the selected option of frame dropdown-list. set the value of language dropdown-list by selected parentid. <BR>$("#dropLang").val($(this).children("option:selected").attr("parentid")); <BR>}; <BR></script> <br> <br> <br><div> <br><select id="dropLang"> <br><option selected value="0"><please select></please></option> <br><option value="1">Javascript</option> <br><option value="2">Java</option> <br><option value="3">C#</option> <br></select> <br><select id="dropFrame"> <br><option selected value="0"><please select></please></option> <br><option value="1" parentid="1">JQuery</option> <br><option value="2" parentid="1">Prototype</option> <br><option value="3" parentid="2">Struts</option> <br><option value="4" parentid="2">Spring</option> <br><option value="5" parentid="2">Velocity</option> <br><option value="6" parentid="2">Hibernate</option> <br><option value="7" parentid="3">ASP.NET MVC</option> <br><option value="8" parentid="3">Castle</option> <br></select> <br> </div> <br> <br> <br> </div> <br>这样，通过上一个下拉框的选择过滤下拉框的内容，基本实现了隐藏<option>的效果，当然，也可以把这种方法利用在下拉框级联选择的功能上，无需Ajax。 <br><br>该代码在IE6，IE7，Chrome2，Firefox3。5下验证通过。 </option>
