0

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

我的问题是：如果用户从第一个下拉菜单中选择一个选项，那么其他两个下拉菜单中的选项应该根据第一个下拉菜单中的选定选项而改变。

我想要的是在通过从这个小提琴的下拉列表中选择数字生成所需数量的集合后，它将动态生成集合 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>
4

2 回答 2

0

由于您使用 jQuery，我建议您在下拉列表中添加一个更改事件。（链接的 jQuery 文档页面包含一个完整的示例）。

关于填充其他 2 个下拉菜单，您有几个选项，例如：

  1. 静态：您创建页面的 PHP 代码会根据用户在第一个下拉列表中的选择填充一个 javascript 数组，其中包含所有可能的选项。然后，只要触发更改事件，您的 javascript 代码就可以使用此数组。

  2. 动态：如果在页面加载时无法预测或加载子选择，请使用 jQuery ajax请求向服务器查询匹配用户选择的选项。您可能还想了解JSON数据格式（PHP 使用json_encode支持）

于 2012-10-13T11:41:29.670 回答
0

演示

我给了 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
  })
})​
于 2012-10-13T11:42:27.647 回答