Ich habe dieses Skript, um drei Dropdowns und ein Texteingabefeld für mein Webformular zu generieren, das ich mit PHP an eine Datenbank senden muss. Dieses Formular ist HTML, aber nur dieser Teil ist Javascript, um die Felder auszufüllen. Ich benutze dieses Javascript, um ungefähr 15 Sätze dieser Dropdowns und Texteingabefelder zu generieren. (1 Satz = 3 Dropdowns und 1 Eingabetextfeld).

Meine Frage ist: Wenn der Benutzer eine Option aus der ersten Dropdown-Liste auswählt, sollten sich die Optionen in den beiden anderen Dropdown-Listen entsprechend der ausgewählten Option in der ersten Dropdown-Liste ändern.

Was ich wollte, ist, nachdem ich die gewünschte Anzahl von Sätzen durch Auswahl der Anzahl aus der Dropdown-Liste in dieser Geige erzeugt habe, werden dynamisch Sätze von 3 Dropdown-Listen und 1 Eingabefeld erzeugt.

Wenn jemand die erste Option aus der ersten Dropdown-Liste auswählt, sollte er auch die Optionen in den anderen Dropdown-Listen ändern.

JSFIDDLE

DAS SCRIPT:

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

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