如何在 jquery 中将对象值传递给 .on

Question

我有一个按钮，当使用单击它时，它会添加两个下拉列表，第二个的值取决于用户从第一个中选择的内容（值来自数据库），他可以根据需要添加多个下拉列表，所以我需要识别每个用户选择， 所以我这样做： 当他点击按钮添加时

    var Incremental = 0;
    $("#add-newProduct").on("click", function () {
        Incremental++;
        LoadCategories();
        var htmlString = `  
                            <tr>
                                <td>
                                    <select class="category-DropDownList`+ Incremental +`"> </select>
                                </td>

                                <td>
                                    <select class="product-DropDownList`+ Incremental +`"></select>
                                </td>

                                <td>
                                    <input id="product-price`+ Incremental +`" type="text" disabled />
                                </td>

                                <td>
                                    <input id="product-quantity`+ Incremental +`" type="text" disabled />
                                </td>

                                <td>
                                    <a class="delete-button`+ Incremental +` button is-danger">remove product</a>
                                </td>
                            </tr>

                        `;
        $("#product-rows").append(htmlString);
    });
   

function LoadCategories() {
        $.getJSON('@Url.Action("GetAllCategories", "Categories")', function (result) {
            console.log(result);
            $(".category-DropDownList" + Incremental).html("");
            $(".category-DropDownList" + Incremental).append("<option value=''>no thing selected</option>");
            for (var i = 0; i < result.length; i++) {
                $(".category-DropDownList" + Incremental).append("<option value=" + result[i].ID + ">" + result[i].Name + "</option");
            }
        });

然后当他从 .category-DropDownList 中选择一个值时

$("#product-rows").on("change", ".category-DropDownList" + Incremental, function () {
            showProducts($(this).val());
        });
        function showProducts(val)
        {
            console.log(val);
            $.getJSON('@Url.Action("GetProductsByCategoryId", "Products")' + "/" + val, function (result) {
                $(".product-DropDownList" + Incremental).html("");
                var data = result;
                console.log(data);
                $(".product-DropDownList" + Incremental).append("<option value=''>no thing selected</option>");
                for (var i = 0; i < data.length; i++) {
                    $(".product-DropDownList" + Incremental).append("<option value=" + data[i].ID + ">" + data[i].Name + "</option");
                }
            });
        }

所以问题在这里： $("#product-rows").on("change", ".category-DropDownList" + Incremental, function () 如何将增量值与 .category-DropDownList 连接起来

Answer 1

为每个元素使用一个公共类并使用它们出现的行来遍历同一行中的其他元素

当您开始删除行并且具有与增量不同的行数等时，您将遇到使用增量的问题。当您可以在所有行上通用地做事情时，这比值得做的事情要麻烦得多

由于我没有数据可用于创建选项，因此仅将产品的值更改为与类别相同的简单示例

$("#product-rows").on("change", ".category-DropDownList", function() {
  const cat = this.value,
    $row = $(this).closest('tr')
  showProducts(cat, $row);
});


function showProducts(cat, $row) {
  // fake ajax 
  Promise.resolve(cat).then(function(res) {
    $row.find('.product-DropDownList').val(res);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="product-rows">
  <tr>
    <td><select class="category-DropDownList">
        <option value="">--- select Cat---</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td><select class="product-DropDownList">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
    <tr>
    <td><select class="category-DropDownList">
        <option value="">--- select Cat---</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
    <td><select class="product-DropDownList">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </td>
  </tr>
  <tr>
</table>