Question

我确实有这个脚本为我的webform生成三个下拉列表和一个文本输入字段，我必须使用PHP提交到数据库。这个表单是HTML，但只有这部分是javascript来填充字段。我正在使用这个javascript生成大约15组这些下拉列表和文本输入字段。（1套= 3个下拉菜单和1个输入文字字段）。

我的问题是：如果用户从第一个下拉列表中选择一个选项，则其他两个下拉列表中的选项应根据第一个下拉列表中的选定选项进行更改。

我想要的是通过从这个小提琴的下拉列表中选择数字生成所需数量的集合后，它将动态生成3个下拉列表和1个输入字段。

因此，如果有人从第一个下拉列表中选择了第一个选项，那么它也应该更改其他下拉列表中的选项。

JSFIDDLE

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

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个下拉列表，您有几个选项，例如：

静态：根据用户在第一个下拉列表中的选择，创建页面的PHP代码将填入一个javascript数组，其中包含所有可能的选项。然后，只要触发更改事件，您的javascript代码就可以使用此数组。
动态：如果在页面加载时无法预测或加载子选项，请使用jQuery ajax请求查询服务器以查找与用户选择匹配的选项。您可能还想了解JSon数据格式（使用json_encode支持PHP）

Answer 2

DEMO

我给了sel和按钮一个ID并更改了对jQuery的dom访问

我也使用＆＃34; i＆＃34;和＆＃34; j＆＃34;现在

假设您想要同步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
  })
})

如果动态生成，我如何更改下拉列表中的选项？

2 个答案: