Estoy tratando de crear un menú desplegable de 3 niveles con datos, pero los menús desplegables segundo y tercero aún muestran los datos como un todo. ¿Cómo hacer que el segundo y el tercer filtro desplegable se basen en datos relacionados?
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>He intentado hacerlo así. que debo agregar
Debe verificar si ya hay un elemento select con el mismo contenido antes de agregarlo nuevamente o terminará con duplicados.
Revisa este hilo: 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>