Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! 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> Untitled Page </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.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 );
});
// The change event of language dropdown-list
Var eDropLangChange = function (){
// The selected value of the language dropdown-list.
Var selectedValue = $ (this). val ();
// Show all options.
$ ("# DropFrame"). children ("span"). each (function (){
$ (This). children (). clone (). replaceAll ($ (this); // use the content of the <span> replace the <span>
});
// Filter the data through selected value of language dropdown-list partition T <Please Select>.
// If the option is <Please Select>, it only needs to show all and hide nothing.
If (parseInt (selectedValue )! = 0 ){
// Hide the option whose parentid is not equal with selected value of language dropdown-list.
// The <Please Select> option shocould not be hidden.
$ ("# DropFrame"). children ("option [parentid! = '"+ SelectedValue +"'] [value! = '0'] "). each (function (){
$ (This ). wrap ("<span style = 'display: none'> </span>"); // add a <span> around the <option> and hide the <span>.
});
}
};
// The change event of frame dropdown-list.
Var eDropFrameChange = function (){
// Find the selected option of frame dropdown-list. set the value of language dropdown-list by selected parentid.
$ ("# 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>
In this way, the content of the drop-down box is filtered by the selection of the previous drop-down box, which basically achieves the effect of hiding <option>. Of course, this method can also be used in the cascade selection function of the drop-down box, ajax is not required.
This code is available in IE6, IE7, Chrome2, and Firefox3. 5.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
