Shulou(Shulou.com)06/03 Report--

This article mainly explains "JavaScript how to achieve the provincial and municipal linkage of the web page drop-down list". The explanation in the article is simple and clear and easy to learn and understand. please follow the editor's train of thought to study and learn "JavaScript how to achieve the provincial and municipal linkage of the web page drop-down list".

Hello everyone, today I would like to share with you the provincial and municipal linkage of the drop-down list on the web page. When we usually fill in some information, there will be a linkage between provinces and cities, that is, select our province in the first drop-down list, and the latter drop-down list shows all the cities in the province.

Since it is a provincial-city linkage, we cannot write the data directly to the web page. We should dynamically generate all the cities in the province through the province of the first drop-down list. We can first define a JSON object to represent provinces, define an array in the object to store all the cities in a province (the cities here are also JSON objects), and finally use an array to store all the provinces. We can use JavaScript to add the option option to the web page. With this link, we can add a change event to the first drop-down list, and when it changes, the latter drop-down list is updated to all cities in the current province.

First of all, we need provincial and municipal data: an array of all provinces, and an array of cities in each province. Here I am writing about Beijing as an example.

Var data = [{"province": "Beijing", "city": [{"cname": "Beijing", "code": "101010100"}, {"cname": "Chaoyang", "code": "101010300"} {"cname": "Shunyi", "code": "101010400"}, {"cname": "Huairou", "code": "101010500"}, {"cname": "Tongzhou" "code": "101010600"},...]},....]

Then we first display two drop-down lists on the page.

Provinces and cities in which they are located

The corresponding JavaScript code: first traverse the array to get all the provinces, and then traverse each province to change all the cities of the province. Displayed on the page by creating and adding option nodes.

/ / A pair of data traversal shows all provinces data.forEach ((p, I) = > {/ / create an option node let option = document.createElement ('option'); / / set the text value of the option node option.textContent = p.province; / / set the value of the option node option.value = I; / / append a child node option $(' province') .appendChild (option) to the element whose id is province / / load city chooseCity (0) in the drop-down list by default;}) / / add 'change' event $(' province'). AddEventListener ('change', function () {/ * load city * / chooseCity (this.value) in the drop-down list;}) / function: get all cities of the corresponding province function chooseCity (index) {/ / get the corresponding province let p = data [index] through the index / / clear the current city information $('city'). Length = 0; / get all cities in the corresponding province let cities = p.city; / / A traversal of all cities shows cities.forEach (c = > {/ / create an option1 node let option1 = document.createElement (' option'); / / set the text value of the option1 node option1.textContent = c.cname / / append a child node option1 $('city') .appendChild (option1) to the element whose id is city;})} / / function: get the element function $(id) {return document.getElementById (id) through id;}

Thank you for your reading, the above is the content of "JavaScript how to achieve the provincial and municipal linkage of the web page drop-down list". After the study of this article, I believe you have a deeper understanding of how JavaScript realizes the provincial and municipal linkage of the web page drop-down list, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.