Home > Developer > JavaScript
is a two drop-down list box, I assume it has two drop-down lists (there can actually be more), the first drop-down list lets you select the province, and the other drop-down list lets you choose the city, and when you change the selection in the drop-down list of the province, the city's drop-down list should also be changed with the province name of your choice. , which results in a linkage of more than the result is a simple two-level linkage.
Specific look at the code
| <! DOCTYPE html> | |
| <meta charset= "UTF-8" > | |
| <title></title> | |
| <body> | |
| <select id= "country" > | |
| <option value= "" > Country </option> | |
| </select> | |
| <select id= "City" > | |
| <option value= "" > City </option> | |
| </select> | |
| <script type= "text/javascript" > | |
| var country = [ | |
| ["China", "Beijing", "Shanghai", "Chongqing"), | |
| ["USA", "Washington", "New York", "Las Vegas"], | |
| ["Japan", "Tokyo", "Yokohama", "Kobe"] | |
| ] | |
| Get to two drop-down lists | |
| var country1 = document.getElementById ("Country"); | |
| var city1 = document.getElementById ("city"); | |
| Put the name of the country in the first down box. | |
| function Countrytosel () { | |
| for (Var i=0;i<country.length;i++) { | |
| Dynamically Create Option tags | |
| var option1 = document.createelement ("option"); | |
| option1.innerhtml = country[i][0];//put the country name in option | |
| Country1.appendchild (option1);//Put option in the first drop-down list | |
| } | |
| } | |
| Countrytosel (); | |
| Put the city name in the second drop-down list | |
| function Citytosel (index) { | |
| for (Var j=1;j<country[index].length;j++) { | |
| var option2 = document.createelement ("option"); | |
| option2.innerhtml = country[index][j];//put the city name in option | |
| City1.appendchild (option2);//Put option in the second drop-down list | |
| } | |
| } | |
| Citytosel (1); | |
| Country1.onchange = function () { | |
| SelectedIndex, the location of the option for the drop-down list | |
| alert (This.selectedindex); | |
| city1.innerhtml = "<option value=" > City </option> "; | |
| if (this.selectedindex!=0) { | |
| Citytosel (this.selectedindex-1) | |
| } | |
| } | |
| </script> | |
| </body> | |
JavaScript two-level linkage
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
