从相同结构化表中的选择选项中获取值

Question

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

身体...

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

我正在循环表格。 countx 正在递增。

如果我有两个表，那么如果我像这样硬编码，一切都会很好......

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

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

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

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 和类，但在循环中两者都不起作用。

我的按钮点击事件...

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

  });

  }

Answer 1

附加事件侦听器的两种解决方案似乎都有效。这是一个关于它的 JSfiffle 的工作演示，ID:s。因此，您应该寻找其他错误来源，可能在您发布的内容之外。您是否正确定位元素？

https://jsfiddle.net/wj8aygsy/

$("#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);
   });
}

Answer 2

你不必循环它，你可以使用 starts with 选择器。

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