Question

我使用 jquery 向页面动态添加了一个表，该表包含 5 个下拉列表。我正在尝试填充已动态添加的行上的下拉列表之一的值，但是，我无法实现。

这是我的表格，为了简单起见，我删除了不必要的字段：

<table class="table" id="1" order-month="2021-05-01T00:00:00">
            <thead>
                <tr>
                    <th scope="col">
                        <select class="form-select form-control mb-2 mr-sm-2" id="ItemList">
                            <option selected="">Select Item</option>
                        </select>
                    </th>
                </tr>
                <tr>
                    <th scope="col">Item</th>
                    <th scope="col">Day Part</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select class="form-select form-control mb-2 mr-sm-2" id="ClassificationList">
                            <option selected="">Select Classification</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select form-control mb-2 mr-sm-2" id="DayValueList">
                            <option selected="">Select Day Value</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

当在屏幕上按下按钮时，该表通过 jquery 动态添加，当我从 ItemList 选择列表中选择一个项目时，将调用 ajax 方法，该方法反过来从服务器检索分类。然后我尝试填充分类列表选择列表，如下所示：

 $.ajax({
          type: 'POST',
          data: formData,
          url: '@Url.Page("product", "getitemclassifications")',
          success: function (result) {
             console.log(result);

             var $dropdown = $("$('table[id=1] > tbody > tr > td > select#ClassificationList')");
             $.each(result.classifications, function () {
                  $dropdown.append($("<option />").val(this.id).text(this.name));
             });

           },
            error: function (result) { }
     });

为了测试目的，我在 ajax 方法中硬编码了表的 Id。

但是，我收到以下错误：

语法错误，无法识别的表达式：$('table[id=1] > tbody > tr > td > select#ClassificationList')

谁能给我指出正确的方向，让我了解如何定位一个动态添加的选择列表，然后用给定的值填充它？

Answer 1

给选择一个不同的虚拟类

<select class = "form-select form-control mb-2 mr-am-2 itemlist“>

您可以使用 find 获取它

$(’#1’).find(’.itemlist’).append();

Answer 2

您需要使用 class 而不是 ids ，因为正如您所说，已经存在具有相同 ID 的元素，因此如果您使用 id ，它将以它们为目标。然后，在更改您的项目时选择框使用 $(this).closest("table") 从选择框中获取最近的表格，然后使用 .find() 更改表格内所需的选择框。

演示代码：

//on change of item
$(document).on("change", ".ItemList", function() {
  var selector = $(this).closest("table"); //get closest table
  /*$.ajax({
     type: 'POST',
     data: "",
     url: '@Url.Page("product", "getitemclassifications")',
     success: function(result) {
       console.log(result);*/
  //use .find to get slect-box
  var $dropdown = selector.find("select.ClassificationList");
  //$.each(result.classifications, function() {
  $dropdown.append($("<option />").val(1).text("abc"));
  //});

  /* },
    error: function(result) {}
  });*/
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table class="table" id="1" order-month="2021-05-01T00:00:00">
  <thead>
    <tr>
      <th scope="col">
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 ItemList">
          <option selected="">Select Item</option>
          <option value="1">1</option>
        </select>
      </th>
    </tr>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Day Part</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 ClassificationList">
          <option selected="">Select Classification</option>
        </select>
      </td>
      <td>
        <!--change to class-->
        <select class="form-select form-control mb-2 mr-sm-2 DayValueList">
          <option selected="">Select Day Value</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

填充使用 jquery 动态添加的选择列表

2 个答案: