<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><title>無題ページ</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>//変更イベントをバインドします <br>$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); <br> $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange); <br><br>//言語ドロップダウン リストの変更イベント <br>var eDropLangChange = function(){ <br>//言語ドロップダウン リストの選択された値。 <br>var selectedValue = $(this).val(); <br><br>//すべてのオプションを表示します。 <br>$("#dropFrame").children("span").each(function(){ <br>$(this).children().clone().replaceAll($(this)); // <br> を置き換えて <span> の内容を使用します。 <BR><br>//<選択してください> を除く、言語ドロップダウン リストの選択した値によってデータをフィルタリングします。 <br>// オプションが <選択してください> の場合は、すべてを表示し、何も非表示にしないだけで済みます。 <br>if(parseInt(selectedValue) != 0){ <br>// 言語ドロップダウン リストの選択された値と等しくない親 ID を持つオプションを非表示にします。 <br>//オプションを非表示にしないでください。 <br>$("#dropFrame").children("option[parentid!='" selectedValue "'][value!='0']").each(function(){ <br>$(this). Wrap("<span style='display:none'></span>"); // <option> の周囲に <span> を追加し、<br> を非表示にします。 ; <br>} <br>}; <br><br>//フレームドロップダウンリストの変更イベント。 <br>var eDropFrameChange = function(){ <br>//フレーム ドロップダウン リストの選択されたオプションを検索します。選択した親 ID によって言語ドロップダウン リストの値を設定します。 <br>$("#dropLang").val($(this).children("option:selected").attr("parentid")); <br>}; <br></script> <br></head> <br> <br><div> <br><select id="dropLang"> <br><option selected="selected" value="0"><選択してください></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="selected" value="0"><選択してください></option> <br><option value="1"parentid="1">JQuery</option> <br><option value="2"parentid="1">プロトタイプ</option> <br><option value="3"parentid="2">Struts</option> <br><option value="4"parentid="2">Spring</option> <br><option value="5"parentid="2">速度</option> <br><option value="6"parentid="2">休止状態</option> <br><option value="7"parentid="3">ASP.NET MVC</option> <br><option value="8"parentid="3">城</option> <br></select> <br> </div> <br></body> <br></html> <br><br> </div> このように、上の 1 つの下拉页の選択を介して下拉页の内容を実行すると、基本的にオプションの結果が実現されますが、当然、この方法を下拉页の選択で利用することもできます。 <br><br> このコードは IE6、IE7、Chrome2、Firefox3.5 以降で認証されています。
