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

Question

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

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

然后当他 select 来自 .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

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

当您开始删除行并且行数与增量等不同时，您将运行遇到使用增量的问题。当您可以对所有行进行通用操作时，麻烦远远超过它的价值

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

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

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

How can i pass the object value to .on in jquery

javascript

jquery

frontend

web-frontend