3 level multiple cascanding dropdown using Array

Question

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?

score 0 · Answer 1 · answered Feb 16 '22 at 16:16

0

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

answered Feb 16 '22 at 16:16

ivsterr

128
1
7

Scriptkiddy1337 · Accepted Answer · 2022-02-16T23:02:37.267

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",
  }
];

function addElementsFor(c, v, index) {
    var tracker = [];
    for (var i = 0, o; o = json[i]; i++) {
        if (!!v && !!index && o[v] !== json[index][v]) {
            continue;
        }
        if (tracker.indexOf(o[c.id]) !== -1) {
            continue;
        }
        tracker.push(o[c.id]);
        var option = document.createElement('option');
        option.value = i;
        option.innerText = o[c.id];
        c.appendChild(option);
    }
    return c
}

function populateSubCategory(c, v, index) {
    var state = document.getElementById(c);
    state.disabled = false;
    while (state.firstChild) state.firstChild.remove();
    var option = document.createElement('option');
    option.value = -1;
    option.innerText = '----';
    state.appendChild(option);
    if (index * 1 < 0) return;
    return addElementsFor(state, v, index);
}

window.addEventListener('load', function() {
    addElementsFor(document.getElementById('country')).addEventListener('change', function(ev) {      
        populateSubCategory('state', ev.target.id, ev.target.value).addEventListener('change', function(ev) {
            populateSubCategory('city', ev.target.id, ev.target.value).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="-1" selected="selected">Please select state </option>
    </select>
    <br>
    <br>
    <select name="optone" id="state" size="1">
        <option value="-1" selected="selected">Please Select country first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="city" size="1">
        <option value="-1" selected="selected">Please select country first</option>
    </select>
    </form>

3 level multiple cascanding dropdown using Array

2 Answers2