如何動態生成下拉菜單中的選項？

Question

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

我的問題是：如果用戶從第一個下拉列表中選擇一個選項，則其他兩個下拉列表中的選項應根據第一個drodown中的選定選項而改變。

我想要的是通過從這個小提琴中的下拉列表中選擇數字來生成所需數量的集合後，它將動態地生成設置od 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. 靜態：創建該網頁的JavaScript陣列填滿了根據用戶所需的所有可能的選擇你的PHP代碼在第一個下拉列表中選擇。然後，無論何時觸發更改事件，您的JavaScript代碼都可以使用此數組。

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

Answer 2

DEMO

我給SEL和按鈕的ID，改變了訪問DOM jQuery的

我現在也使用「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 
    }) 
})​