Javascript 从同一结构化表的“选择”选项中获取值

我正在HTML页面中动态创建表。可能有一个或多个表。数字是变化的。表上只有一行，这些行具有相同的表结构。在我的表格行中，有一个选择选项和一个按钮。我在这里做的是更改select选项的值，并使用按钮更新数据库。为此，我从选择选项中进行选择，并将该值放入隐藏的输入字段。稍后，我将获取所有输入文件数据并更新数据库。例如，如果我有两个表，我需要为select选项设置两个ID。为了做到这一点，我在文档ready中循环来自for循环的ID。但那没用。这意味着我无法访问该值。但如果我在同一个文档下硬编码了两个ID，它就可以工作了

T身体

echo "<form id='form' name='form'>";
                          echo "<tbody class='tbl_tbody'>";
                            echo "<tr>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['statDate'])."</b></td>";
                              echo "<td style='width: 115px;'><b>".trim($row_sub_res['tarDate'])."</b></td>";

                              echo "<td>";

                              echo "<label class='w3-text-red'><b>".trim($row_sub_res['status_name'])."</b></label><br>";
                              echo "<input name='oldSubStat' type ='hidden' id='selected_stat' value=".trim($row_sub_res['status']).">";  //first input 0
                              echo "<input name='newSubStat' type ='hidden' id='selected_stat_new_id' class='selected_statx$countx'>";

                              echo "<select id='select_my_id$countx' class='select_my_class$countx' >";
                              echo "<option disabled selected>Change Status</option>";
                              echo "<option id='1' value='1'>Pending</option>";
                              echo "<option id='3' value='3'>Complete</option>";
                              echo "<option id='4' value='4'>On Hold</option>";
                              echo "</select>";

                              echo "</td>";

                              //echo "<td>".trim($row_sub_res['tarDate'])."</td>";
                              echo "<td><b><input type='text' id='targetDatepickerID$countx' class='datepickerClass' disabled='disabled' placeholder='yyyy-mm-dd' name='tdate' value=".trim($row_sub_res['tarDate'])."></b></td>";

                              echo "<td> <input type='submit' id='sub_row_update_id$countx' class='sub_row_update' value='Update'/> </td>";
                            echo "</tr>";
                          echo "</tbody>";
                        echo "</form>";

但如果我循环这个。那不行

for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $(".select_my_class"+j).change(function() {
   var idx = $(this).children(":selected").attr("id");
   $(".selected_statx"+j).val("test");
   $(".selected_statx"+j).val(idx);

   });
}

我尝试同时使用ID和class，但在循环中这两个都不起作用

我的按钮点击事件

  for (var i = 0; i < 3; i++) {

  $("#sub_row_update_id"+i).click(function(e) {

    var $subitem;
    e.preventDefault();
   $subitem = $(this).closest("tr")   // Finds the closest row <tr> 
                     .find("input").each(function() {

    });

      var xxx2  = $subitem[0]["value"];  //old status
      var yyy2  = $subitem[1]["value"];  //new status
      var zzz2  = $subitem[2]["value"];  //new tar date

      console.log(xxx2); 
      console.log(yyy2);
      console.log(zzz2);

  });

  }

---

您不必循环它，您可以使用带选择器的开始

$("select[class^='select_my_class']").change(function() {
  var n = $(this).attr("id").match(/\d/g)[0];
  var idx = $(this).find("option:selected").attr("id");
  $(".selected_statx"+n).val("test");
  $(".selected_statx"+n).val(idx);
});

---

两种附加事件侦听器的解决方案似乎都有效。下面是一个关于JSfiffle的工作演示，ID为：s。所以你应该寻找其他的错误来源，可能在你发布的内容之外。您是否正确地针对元素

---

不需要0,1,2。。如果你知道这个。只需使用$.select_my_class.changefunction{var idx=$this.children:selected.attrid；$this.val；$this.validx；console.logidx+idx；}；而且您已经设置了这个挂起的值，那么为什么要将id和更新作为值。如果选择任何一个选项，它将自动设置为该选择框的值。这是正常的事情不起作用。我可以获得更改后的值，但无法将该值指定给隐藏的输入字段。因为在单击按钮时，我需要访问输入字段数据。我已使用我的按钮单击事件更新了我的问题。当我选择一个选项时会发生此错误。。。。未捕获引用错误：id未定义现在出现此问题。。。未捕获的TypeError:无法读取Null的属性“0”。您能否指出发生此问题的行@D.Maduth是一个匹配项/\D/g[0]我的问题是在循环中没有将值分配给输入字段。因为在点击按钮时，我使用。。。对于var i=0；i<3；i++{$sub_row_update_id+i.clickfunction{var$subitem；e.preventDefault；$subitem=$this.closesttr.findinput.eachfunction{}；var xxx2=$subitem[0][value]；var yyyy2=$subitem[1][value]；var zzz2=$subitem[2][value]；}

$("select[class^='select_my_class']").change(function() {
  var n = $(this).attr("id").match(/\d/g)[0];
  var idx = $(this).find("option:selected").attr("id");
  $(".selected_statx"+n).val("test");
  $(".selected_statx"+n).val(idx);
});

$("#select_my_id0").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx0").val("");
    $(".selected_statx0").val(idx);
    console.log("separate " + idx);
 });

  $("#select_my_id1").change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx1").val("");
    $(".selected_statx1").val(idx);
    console.log("separate " + idx);
 }); 


 for (var j = 0; j < 2; j++) {
   console.log("idx " + j);
   $("#select_my_id"+j).change(function() {
    var idx = $(this).children(":selected").attr("id");
    $(".selected_statx"+j).val("test");
    $(".selected_statx"+j).val(idx);
    console.log("loop " + idx);
   });
}