Dinámicamente poblado Lista desplegable de la selección de otro valor desplegable

Mi requisito es que para una selección en una lista desplegable de ‘comida’, una segunda ‘lista’ de lista desplegable se llene dinámicamente con valores relacionados con la selección en la primera lista desplegable. Luego, dependiendo de lo que se seleccione en el menú desplegable de comidas, la lista debe cambiar en la categoría. He escrito la siguiente función de Javascript, pero la salida que obtengo no está rellenando recientemente el segundo menú desplegable. Al cambiar una selección, la nueva lista acaba de ser añadida a la lista anterior.

function changecat() { var selectHTML = ""; var A = ["Soup", "Juice", "Tea", "Others"]; var B = ["Soup", "Juice", "Water", "Others"]; var C = ["Soup", "Juice", "Coffee", "Tea", "Others"]; if (document.getElementById("meal").value == "A") { var select = document.getElementById('category').options.length; for (var i = 0; i < select; i++) { document.getElementById('category').options.remove(i); } for (var i = 0; i < A.length; i++) { var newSelect = document.createElement('option'); selectHTML = "" + A[i] + ""; newSelect.innerHTML = selectHTML; document.getElementById('category').add(newSelect); } } else if (document.getElementById("meal").value == "B") { var select = document.getElementById('category').options.length; for (var i = 0; i < select; i++) { document.getElementById('category').options.remove(i); } for (var i = 0; i < B.length; i++) { var newSelect = document.createElement('option'); selectHTML = "" + B[i] + ""; newSelect.innerHTML = selectHTML; document.getElementById('category').add(newSelect); } } else if (document.getElementById("project").value == "C") { var select = document.getElementById('category').options.length; for (var i = 0; i < select; i++) { document.getElementById('category').options.remove(i); } for (var i = 0; i < C.length; i++) { var newSelect = document.createElement('option'); selectHTML = "" + C[i] + ""; newSelect.innerHTML = selectHTML; document.getElementById('category').add(newSelect); } } } 

 HTML-  Select A B C   Select  

Puede ser que te ayude

JSFiddle: DEMO

HTML

   

JS

 var mealsByCategory = { A: ["Soup", "Juice", "Tea", "Others"], B: ["Soup", "Juice", "Water", "Others"], C: ["Soup", "Juice", "Coffee", "Tea", "Others"] } function changecat(value) { if (value.length == 0) document.getElementById("category").innerHTML = ""; else { var catOptions = ""; for (categoryId in mealsByCategory[value]) { catOptions += ""; } document.getElementById("category").innerHTML = catOptions; } } 

En realidad, hay un tipo de bucle soportado por JavaScript, es decir, para … en bucle.

Un ciclo for … in solo itera sobre las propiedades enumerables. Los objetos creados a partir de constructores incorporados como Array y Object han heredado propiedades no enumerables de Object.prototype y String.prototype, como el método indexOf () de String o el método toString () de Object. El ciclo iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto hereda del prototipo del constructor (las propiedades más cercanas al objeto en la cadena del prototipo anulan las propiedades de los prototipos).

En cada iteración, una propiedad del objeto se asigna a nombre-variable y este ciclo continúa hasta que se agoten todas las propiedades del objeto.

Para más enlaces

La razón por la que se agrega el código es porque en el bucle for para borrar la segunda lista desplegable, la expresión de actualización no es necesaria ya que la lista se reduce en tamaño y así en cada iteración la longitud de la lista disminuye, y así no puede borrar toda la lista Además, la función de eliminación debe estar fuera de las condiciones if para evitar redundancia. Function changecat () {var selectHTML = “”;

 var A = ["Soup", "Juice", "Tea", "Others"]; var B = ["Soup", "Juice", "Water", "Others"]; var C = ["Soup", "Juice", "Coffee", "Tea", "Others"]; var select = document.getElementById('category').options.length; for (var i = 0; i < select; ) { document.getElementById('category').options.remove(i); } if (document.getElementById("meal").value == "A") { for (var i = 0; i < A.length; i++) { var newSelect = document.createElement('option'); selectHTML = " 

}

Puede usar el evento onchange y usar una instrucción switch con el valor seleccionado del primer menú desplegable y, de acuerdo con ello, agregar las opciones a la segunda lista:

  var A= ["Soup", "Juice", "Tea","Others"]; var B= ["Soup","Juice","Water", "Others"]; var C= ["Soup","Juice","Coffee", "Tea","Others"]; var changeCat = function changeCat(firstList) { var newSel = document.getElementById("category"); //if you want to remove this default option use newSel.innerHTML="" newSel.innerHTML=""; // to reset the second list everytime var opt; //test according to the selected value switch (firstList.options[firstList.selectedIndex].value) { case "A": for (var i=0; len=A.length, i