<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 전환//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" 언어="javascript"> <br>$(function(){ <br>//변경 이벤트 바인딩 <br>$("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); <br> $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange) <br>}); <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)); // <span>의 내용을 사용하여 <span> <br>}을 교체하세요. <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><옵션 값="1">자바스크립트</option> <br><option value="2">자바</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">봄</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> </div> <br>这样, 일반적으로 过上一个下拉框的选择过滤下拉框的内容，基本实现了隐藏<option>적效果，当然，也可以下拉框级联选择에서 把这种요법을 사용함的功能上，无需Ajax。 <br><br>该代码는 IE6，IE7，Chrome2，Firefox3。5下验证通过。
