3 level multiple cascanding dropdown using Array-CodePudding

I am trying to create a 3 level dropdown with data, but the second and third dropdowns still show the data as a whole. How to have the second and third dropdown filter data based on related data?

var json = [{
"country": "USA",
"state": "LOS ANGELES",
"city": "LOS ANGELES"
  },
  {
"country": "USA",
"state": "LOS ANGELES",
"city": "LOS ANGELES 2"
  },
  {
"country": "USA",
"state": "New York",
"city": "New York",
  },
  {
"country": "USA",
"state": "New York",
"city": "New York 2",
  },
  {
"country": "CANADA",
"state": "British Columbia",
"city": "Vancovour",
  }
];

for (i = 0; i < json.length; i  ) {
  $("#country").append("<option value="   json[i]["country"]   ">"   json[i]["country"]   "</option>");
  $("#state").append("<option value="   json[i]["country"]   ">"   json[i]["state"]   "</option>");
  $("#city").append("<option value="   json[i]["country"]   ">"   json[i]["city"]   "</option>");
}

$("#state").change(function() {
  $("#country")[0].selectedIndex = $(this)[0].selectedIndex
  $("##city")[0].selectedIndex = $(this)[0].selectedIndex
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform" id="myForm">
  <select name="opttwo" id="country" size="1">
    <option value="" selected="selected">Please select state </option>
  </select>
  <br>
  <br>
  <select name="optone" id="state" size="1">
    <option value="" selected="selected">Please Select country first</option>
  </select>
  <br>
  <br>
  <select name="optthree" id="city" size="1">
    <option value="" selected="selected">Please select country first</option>
  </select>
</form>

I have tried to make it like this. what should I add?

CodePudding user response：

You need to check if there is already a select element with the same content before adding it again or you will end up with duplicates.

Check this thread: https://stackoverflow.com/a/9791018/5211055

CodePudding user response：

var json = [{
"country": "USA",
"state": "LOS ANGELES",
"city": "LOS ANGELES"
  },
  {
"country": "USA",
"state": "LOS ANGELES",
"city": "LOS ANGELES 2"
  },
  {
"country": "USA",
"state": "New York",
"city": "New York",
  },
  {
"country": "USA",
"state": "New York",
"city": "New York 2",
  },
  {
"country": "CANADA",
"state": "British Columbia",
"city": "Vancovour",
  }
];


window.addEventListener('load', function() {
    var country = document.getElementById('country');
    var tracker = [];
    for (var i = 0, o; o = json[i]; i  ) {
        if (tracker.indexOf(o['country']) !== -1) {
            continue;
        }
        tracker.push(o['country']);
        var option = document.createElement('option');
        option.value = i;
        option.innerText = o['country'];
        country.appendChild(option);
    }
    country.addEventListener('change', function(ev) {
        var state = document.getElementById('state');
        state.disabled = false;
        while (state.firstChild) {
            state.firstChild.remove();
        }
        var option = document.createElement('option');
        option.value = -1;
        option.innerText = '----';
        state.appendChild(option);
        if (ev.target.value * 1 < 0) {
            return;
        }
        var tracker = [];
        for (var i = 0, o; o = json[i]; i  ) {
            if (o['country'] !== json[ev.target.value]['country']) {
                continue;
            }
            if (tracker.indexOf(o['state']) !== -1) {
                continue;
            }
            tracker.push(o['state']);
            var option = document.createElement('option');
            option.value = i;
            option.innerText = o['state'];
            state.appendChild(option);
        }
        state.addEventListener('change', function(ev) {
            var city = document.getElementById('city');
            city.disabled = false;
            while (city.firstChild) {
                city.firstChild.remove();
            }
            var option = document.createElement('option');
            option.value = -1;
            option.innerText = '----';
            city.appendChild(option);
            if (ev.target.value * 1 < 0) {
                return;
            }
            var tracker = [];
            for (var i = 0, o; o = json[i]; i  ) {
                if (o['state'] !== json[ev.target.value]['state']) {
                    continue;
                }
                if (tracker.indexOf(o['city']) !== -1) {
                    continue;
                }
                tracker.push(o['city']);
                var option = document.createElement('option');
                option.value = i;
                option.innerText = o['city'];
                city.appendChild(option);
            }
            city.addEventListener('change', function(ev) {
                if (ev.target.value * 1 < 0) {
                    return;
                }
                var country = document.getElementById('country');
                var state = document.getElementById('state');
                var city = ev.target;
                if (json.hasOwnProperty(country.value) && json.hasOwnProperty(state.value) && json.hasOwnProperty(city.value)) {
                    console.log('country: %s state: %s city: %s', json[country.value]['country'], json[state.value]['state'], json[city.value]['city']);
                }
            })
        })
    })
});

    <form name="myform" id="myForm">
    <select name="opttwo" id="country" size="1">
        <option value="" selected="selected">Please select state </option>
    </select>
    <br>
    <br>
    <select name="optone" id="state" size="1">
        <option value="" selected="selected">Please Select country first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="city" size="1">
        <option value="" selected="selected">Please select country first</option>
    </select>
    </form>