Php 如果是动态生成的,如何更改下拉列表中的选项?

Php 如果是动态生成的,如何更改下拉列表中的选项?,php,javascript,Php,Javascript,我有这个脚本为我的webform生成三个下拉列表和一个文本输入字段,我必须使用PHP将其提交到数据库。此表单是HTML,但只有此部分是用于填充字段的javascript。我正在使用这个javascript生成大约15组这些下拉列表和文本输入字段。(1组=3个下拉列表和1个输入文本字段) 我的问题是:如果用户从第一个下拉列表中选择一个选项,那么其他两个下拉列表中的选项应该根据第一个下拉列表中选择的选项进行更改 我想做的是,在通过从这个小提琴的下拉列表中选择数字来生成所需的集合数量之后,它将动态生成

我有这个脚本为我的webform生成三个下拉列表和一个文本输入字段,我必须使用PHP将其提交到数据库。此表单是HTML,但只有此部分是用于填充字段的javascript。我正在使用这个javascript生成大约15组这些下拉列表和文本输入字段。(1组=3个下拉列表和1个输入文本字段)

我的问题是:如果用户从第一个下拉列表中选择一个选项,那么其他两个下拉列表中的选项应该根据第一个下拉列表中选择的选项进行更改

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

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

脚本:

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

$(函数(){
$(“输入[type=button][value=Add]”。单击(函数(e){
对于(i=0;i
HTML:

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15

既然您使用jQuery,我建议您在下拉列表中添加一个事件。(链接的jQuery文档页面包含完整示例)

关于填写其他2个下拉列表,您有几个选项,例如:

  • 静态:根据用户在第一个下拉列表中的选择,创建页面的PHP代码将使用所有可能的选项填充javascript数组。然后,javascript代码可以在触发更改事件时使用此数组

  • 动态:如果在页面加载时无法预测或加载子选项,请使用jQuery请求查询服务器,以查找与用户选择匹配的选项。您可能还想了解数据格式(使用PHP支持)

  • 我给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
      })
    })​
    
    $(函数(){
    $(“输入[type=button][value=Add]”。单击(函数(e){
    e、 预防默认值();
    
    对于(var i=0,n=$('#sel').val();i你的问题很模糊。你想知道如何对下拉列表中的用户选择做出反应吗?你想修改和/或选择现有下拉列表的一个选项吗?你的问题与PHP后端有关吗?你尝试了什么?是的,我想根据先前下拉列表中的选择更改下拉列表的选项。我尝试的是找到一个工作示例,但我无法使用它,因为我的下拉列表是使用脚本动态生成的。感谢您提供的解决方案。但是,问题是我对javascript非常陌生,所以我真的不知道如何使用您提供的解决方案。请您在这之前提供帮助。好的,让我试试。这是我的想法“想要”是指通过在此小提琴中选择下拉列表中的数字来生成所需数量的集合后,它将动态生成集合od 3个下拉列表和1个输入字段。因此,如果有人从第一个下拉列表中选择选项1,则应同时更改其他下拉列表中的选项。如果希望我更具体,请告诉我先生,在这个JSFIDLE的帮助下,我能说清楚吗(如果你已经看过的话)?谢谢你提供了一个解决方案,但我不熟悉javascript,真的不知道如何为我成功地使用你的答案。感谢你,但正如我之前所说的,我对这个问题非常陌生,我自己理解和使用它将是一门火箭科学。不,对不起,我可以让你走上正确的轨道,但我也不能做这项工作或者为你写一个完整的教程。你必须自己做更多的研究。我明白。那我该怎么办?