Realizing provincial and municipal linkage effects based on JavaScript

This article shares the specific code of JavaScript to achieve the linkage effect between provinces and cities for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Provincial and municipal linkage effect</title>
</head>
<body onload="initProvince()">
Province: <select id="province" onchange="fillCity()"></select>
City: <select id="city"></select>
<script>
    /**
     * Initialize province function */
    function initProvince() {
        //Declare an array to store provinces let provinceArr=["Shaanxi Province","Sichuan Province","Henan Province","Shandong Province"];
        //Dynamically write the province array into the drop-down list //Get the province list object by id let proovinceObj=document.getElementById("province");
        //Set the content to be displayed when no selection is made let option=new Option("---Please select a province---","");
        proovinceObj.options.add(option);
        //Loop through the province array for (let province of provinceArr) {
            //Create Option object //Parameter 1: List display content //Parameter 2: Option's values attribute value let option = new Option(province,province);
            //Add the option object to the provinceObj object proovinceObj.options.add(option);
        }
    }
    //Create a city array //Declare an array for storing cities let cityArr = new Array();
    cityArr['Shaanxi Province']=['Xi'an', 'Xianyang', 'Baoji', 'Hanzhong', 'Yan'];
    cityArr['Sichuan Province']=['Chengdu', 'Dazhou', 'Guangyuan', 'Mianyang', 'Leshan'];
    cityArr['Henan Province']=['Zhengzhou City', 'Kaifeng City', 'Luoyang City', 'Xinxiang City', 'Jiaozuo City'];
    cityArr['Shandong Province']=['Jinan City', 'Qingdao City', 'Laizhou City', 'Yantai City', 'Dezhou City'];

    /**
     * Fill cities according to provinces*/
    function fillCity() {
        //Get the currently selected province let provinceObj = document.getElementById("province");
        let province = provinceObj.value;
        //Get the city list object let cityObj = document.getElementById("city");
        // Clear the original data in the city list cityObj.options.length=0;
        //Determine whether a province is selected if (province!=""){
            let cityOption = new Option("---Please select a city---","");
            cityObj.options.add(cityOption);
        }
        //According to the province, get the corresponding city array and traverse the city array for (let city of cityArr[province]){
            //Populate each city into the city list let cityOption = new Option(city,city);
            cityObj.options.add(cityOption)
        }
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript realizes the linkage effect between provinces and cities
JavaScript to achieve provincial and municipal linkage bug solution
Code sharing based on JS to achieve provincial and municipal linkage effect
js provincial and municipal linkage effect complete example code
JSON+HTML realizes the linkage selection effect of country, province and city
Province-city linkage menu implemented by JavaScript two-dimensional array
JavaScript provincial and municipal linkage implementation code
A simple example of using js to achieve the linkage effect between provinces and cities
javascript 2009 latest version of provincial and municipal linkage
JavaScript to achieve simple provincial and municipal linkage

<<: How to correctly create MySQL indexes

>>: SQL statements in Mysql do not use indexes