Mam ten skrypt, który generuje trzy listy rozwijane i jedno pole wprowadzania tekstu dla mojego formularza internetowego, który muszę przesłać do bazy danych przy użyciu PHP. Ten formularz to HTML, ale tylko ta część to javascript do wypełnienia pól. Używam tego javascript do wygenerowania około 15 zestawów tych rozwijanych list i pól wprowadzania tekstu. (1 zestaw = 3 listy rozwijane i 1 pole tekstu wejściowego).

Moje pytanie brzmi: jeśli użytkownik wybierze opcję z pierwszej listy rozwijanej, opcje w pozostałych dwóch listach rozwijanych powinny zmienić się w zależności od wybranej opcji w pierwszym zdarzeniu.

Chciałem po wygenerowaniu żądanej liczby zestawów, wybierając liczbę z rozwijanej listy w tym skrzydle, wygeneruje ona dynamicznie zestawy 3 rozwijanych i 1 pole wejściowe.

Więc jeśli ktoś wybierze opcję pierwszą z pierwszej listy rozwijanej, powinien również zmienić opcje w innych rozwijanych listach.

JSFIDDLE

SCENARIUSZ:

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