Как я могу изменить параметры в раскрывающихся списках, если он генерируется динамически?
У меня есть этот скрипт для генерации трех выпадающих списков и одного поля ввода текста для моей веб-формы, которые я должен отправить в базу данных с помощью PHP. Эта форма HTML, но только эта часть является JavaScript для заполнения полей. Я использую этот JavaScript для генерации около 15 наборов этих выпадающих и текстовых полей ввода. (1 набор = 3 раскрывающихся списка и 1 поле ввода текста).
Мой вопрос: если пользователь выбирает параметр из первого раскрывающегося списка, то параметры в двух других раскрывающихся списках должны изменяться в соответствии с выбранным параметром в первом раскрывающемся списке.
Я хотел, чтобы после генерации нужного количества наборов путем выбора номера из раскрывающегося списка в этой скрипте он динамически генерировал наборы из 3 раскрывающихся списков и 1 поля ввода.
Поэтому, если кто-то выберет первый вариант из первого раскрывающегося списка, он должен изменить и другие раскрывающиеся списки.
СЦЕНАРИЙ:
<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>
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>