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?
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
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>