如果它是动态生成的，如何更改下拉菜单中的选项? [英] How can i change options in dropdowns if it is generated dynamically?

问题描述

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

I do have this script to generate three dropdowns and one text input field for my webform that i have to submit to a database using PHP. This form is HTML but only this part is javascript to populate the fields. I am using this javascript to generate approx 15 sets of these dropdowns and text input fields. (1 set = 3 dropdowns and 1 input text field).

我的问题是:如果用户从第一个下拉菜单中选择了一个选项，则其他两个下拉菜单中的选项应根据第一个下拉菜单中的选定选项进行更改.

My question is : If user selects an option from first dropdown then the options in the other two dropdowns should change according to the selected option in the first drodown.

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

What I wanted to is after generating the desired number of sets by selecting the number from the dropdown in this fiddle, it will generate sets od 3 dropdowns and 1 input field dynamically. 

因此，如果有人从第一个下拉菜单中选择了一个选项，那么它也应该在其他下拉菜单中也更改选项.

So if someone selects option one from the first dropdown it should change the options in the other dropdowns as well. 

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>

推荐答案

演示

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

I gave the sel and the button an ID and changed the dom access to jQuery

我现在也使用"i"和"j"

I also use the "i" and "j" now

假设您要同步3个选择项，则代码可能如下所示

Assuming you wanted to syncronise the 3 selects, the code could look like this

$(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
  })
})​

这篇关于如果它是动态生成的，如何更改下拉菜单中的选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！