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

Question

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

    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 一个值 from.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>