JS to achieve three-level linkage

preface

Is a day to learn JS, the address of the drop-down list linkage is not strange; Learning JS from the entry to master, is to step by step drops, but also to practice drops. So here we go. Problem.

Topics in this paper, the

  • Title: Three-level linkage
    • By changing the option values for the provincial drop-down list,
    • At the same time, change the option values of the city-level drop-down list and the district-level drop-down list.
    • And each option value conforms to the jurisdiction of the upper option value.
    • The effect is shown below:

Thinking analytical

Level 3 linkage

  1. Adds the encapsulated data to the items in the provincial drop-down list
  2. Through event binding, when the provincial item changes, modify the municipal drop-down list item,
  3. At the same time, the data of the district-level drop-down list is also modified

Code sample

// Three-level linkage<body> province: <select ID ="one">
        <option value="1">Please select a -- -</option></select> city: <select id="two">
        <option value="1">Please select a -- -</option></ SELECT > area: <select ID ="three">
        <option value="1">Please select a -- -</option></select> ! [image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01ce213fb5fc4f4bbe5bc9ea3169203d~tplv-k3u1fbpfcp-watermark.image)
    <script>
        var item = [{
            "name": "Fujian"."child": [{
                "name": "Fuzhou"."child": ["Jin 'an District"."Taijiang District"] {},"name": Xiamen City."child": ["Siming District"."Haicang District"]]}}, {"name": "Guangdong province"."child": [{
                "name": "Guangzhou"."child": ["Tianhe District"."Panyu District"] {},"name": Shenzhen City."child": ["Shenzhen District 1"."Shenzhen Area 2"]}}]]// Simple three-level linkage
        var shen = document.getElementById("one");
        var shi = document.getElementById("two");
        var qu = document.getElementById("three");
        var op = document.createElement("option");


        var flag = 0;// Mark the provincial location
        for (var i in item) {
            // var opDate = op.cloneNode(true);
            // opDate.innerHTML = item[i].name;
            // shen.appendChild(opDate);
            var opDate = new Option(item[i].name, i);
            shen.appendChild(opDate);
        }

        // The provincial drop-down list changes the trigger event
        shen.onchange = function () {
            // Clear the list of options
            shi.options.length = 0;
            qu.options.length = 0;
            // If no province is selected, both the city and district levels are available
            if (this.value == -1) {
                var opti = "";
                shi.innerHTML = opti;
                qu.innerHTML = opti;
                return;
            }
             // Add a municipal object under a provincial object
            for (var i in item[this.value].child) {
                var opDate = new Option(item[this.value].child[i].name, i);
                shi.appendChild(opDate);
            }
            flag = this.value;
             // The city drop-down list changes the trigger event
             // Clear the list of options
             qu.options.length = 0;
            // Add a district under a provincial object under a municipal object
            for (var i in item[flag].child[this.value].child) {
                var opDate = new Option(item[flag].child[this.value].child[i]); qu.appendChild(opDate); }}Copy the code

conclusion

The data is pre-wrapped, if the address data is a regular string; The first step is to decompose the string to make it easier to retrieve the data.