¿Cómo puedo cambiar las opciones en los menús desplegables si se genera dinámicamente?
Tengo esta secuencia de comandos para generar tres campos desplegables y un campo de entrada de texto para mi formulario web que debo enviar a una base de datos mediante PHP. Este formulario es HTML, pero solo esta parte es javascript para rellenar los campos. Estoy usando este javascript para generar aproximadamente 15 conjuntos de estos campos desplegables y de entrada de texto. (1 set = 3 menús desplegables y 1 campo de texto de entrada).
Mi pregunta es: si el usuario selecciona una opción del primer menú desplegable, las opciones de los otros dos menús desplegables deberían cambiar de acuerdo con la opción seleccionada en el primer borrado.
Lo que quería hacer después de generar el número deseado de conjuntos seleccionando el número del menú desplegable en este violín, generará conjuntos de 3 menús desplegables y 1 campo de entrada dinámicamente.
Entonces, si alguien selecciona la opción uno del primer menú desplegable, también debería cambiar las opciones en los otros menús desplegables.
LA SECUENCIA DE COMANDOS:
<script>
$(function() {
$("input[type=button][value=Add]").click(function(e) {
for (i = 0; i < document.getElementById('sel').value; i++) {
e.preventDefault();
var j = 1;
var newDiv = $("<div>").appendTo("#dropbox");
$("<select>").attr("name", "input1_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<select>").attr("name", "input2_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<select>").attr("name", "input3_"+j).appendTo(newDiv).append(
$("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
$("<input>").attr("name", "input4_"+j).appendTo(newDiv);
$("<button>").text("Remove").appendTo(newDiv).click(function(e) {
e.preventDefault();
$(this).parent().remove();
})
j++;
}
})
})
</script>
EL HTML:
<form>
<select id="sel">
<option value="" selected="selected"></option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="03" >03</option>
<option value="04" >04</option>
<option value="05" >05</option>
<option value="06" >06</option>
<option value="07" >07</option>
<option value="08" >08</option>
<option value="09" >09</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
</select>
<input type="button" value="Add" />
<div id="dropbox"></div>
</form>