如果它是動態生成的，如何更改下拉菜單中的選項？

Question

我確實有此腳本為Webform生成了三個下拉列表和一個文本輸入字段，必須使用PHP提交到數據庫。 這種形式是HTML，但只有這部分是JavaScript來填充字段。 我正在使用此javascript生成這些下拉菜單和文本輸入字段的大約15套。 （1套= 3個下拉菜單和1個輸入文本字段）。

我的問題是：如果用戶從第一個下拉菜單中選擇了一個選項，則其他兩個下拉菜單中的選項應根據第一個下拉菜單中的選定選項進行更改。

我想要的是通過從此提琴中的下拉列表中選擇數字生成所需的集合數之后，它將動態生成3個下拉列表和1個輸入字段的集合。

因此，如果有人從第一個下拉菜單中選擇了一個選項，那么它也應該在其他下拉菜單中更改選項。

JSFIDDLE

劇本：

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

Answer 1

由於您使用的是jQuery，因此建議您在下拉菜單中添加一個change事件。 （鏈接的jQuery文檔頁面包含完整的示例）。

關於填充其他2個下拉菜單，您有幾個選擇，例如：

1. 靜態：用於創建頁面的PHP代碼會根據第1個下拉菜單中的用戶選擇，在javascript數組中填充所需的所有可能選項。 然后，只要觸發更改事件，您的JavaScript代碼就可以使用此數組。

2. 動態：如果無法在頁面加載時預測或加載子選擇，請使用jQuery ajax請求查詢服務器以查找與用戶選擇匹配的選項。 您可能還需要閱讀JSon數據格式（PHP使用json_encode支持）

Answer 2

演示

我給了sel和按鈕一個ID，並更改了對jQuery的dom訪問權限

我現在也使用“ i”和“ j”

假設您要同步3個選擇，代碼可能如下所示

$(function() {
  $("input[type=button][value=Add]").click(function(e) {
    e.preventDefault();
    for (var i=0,n=$('#sel').val();i<n; i++) {
      var newDiv = $("<div>").appendTo("#dropbox");
      for (var j=0;j<3;j++) {
        var id = "input"+i+"_"+j;
        $("<select>")
          .attr("id",id)
          .attr("name",id)
          .on("change",function() {
            // set all other select's value to this value
            $(this).siblings("select").val(this.value);
          })
          .append(
            $("<option>").val("0").text("Option 1"), 
            $("<option>").val("1").text("Option 2"))
          .appendTo(newDiv);
      } // j
      $("<input>")
          .attr("name", "input"+i+"_"+j)
          .appendTo(newDiv);
      $("<button>").text("Remove").appendTo(newDiv).click(function(e) {
        e.preventDefault();
        $(this).parent().remove();
      })
    } // i
  })
})​