<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){ //Bind the change event $("#dropLang").unbind("change", eDropLangChange).bind("change", eDropLangChange); $("#dropFrame").unbind("change", eDropFrameChange).bind("change", eDropFrameChange); }); var eDropLangChange = function(){ var selectedValue = $(this).val(); $("#dropFrame").children("span").each(function(){ $(this).children().clone().replaceAll($(this)); }); if(parseInt(selectedValue) != 0){ $("#dropFrame").children("option[parentid!='" + selectedValue + "'][value!='0']").each(function(){ $(this).wrap("<span style='display:none'></span>"); }); } }; var eDropFrameChange = function(){ $("#dropLang").val($(this).children("option:selected").attr("parentid")); }; </script> </head> <body> <div> <select id="dropLang"> <option selected="selected" value="0"><Please Select></option> <option value="1">Javascript</option> <option value="2">Java</option> <option value="3">C#</option> </select> <select id="dropFrame"> <option selected="selected" value="0"><Please Select></option> <option value="1" parentid="1">JQuery</option> <option value="2" parentid="1">Prototype</option> <option value="3" parentid="2">Struts</option> <option value="4" parentid="2">Spring</option> <option value="5" parentid="2">Velocity</option> <option value="6" parentid="2">Hibernate</option> <option value="7" parentid="3">ASP.NET MVC</option> <option value="8" parentid="3">Castle</option> </select> </div> </body> </html>
posted on
