Question

我有几个包含select标签的动态渲染tr标签。我希望能够根据同一tr标签中的另一个选择更新单个选择。目前发生的是当我在一个tr标签中进行选择更改时，随后在每个tr标签中更新所有其他选择。这是我的代码示例。

HTML：

 <tr>
     <td>
        <select>Main</select>
     </td>
     <td>
        <select>Updated from Main</select>
     </td>
 </tr>
 <tr>
     <td>
        <select>Main</select>
     </td>
     <td>
        <select>Updated from Main</select>
     </td>
 </tr>

Jquery的：

 var monitorProCodeChange = function() {
// monitor select code change
$("select[name=prodCode]").change(function() {
    $("tr").each(function() {
        alert("change event fired");

        var prodCode = $(this).find("select[name=prodCode]");
        var product = $(this).find("select[name=product]");

        $.getJSON("/api/product/getproductbyid/" + prodCode.val(), function(data) {
            product.append(
                $("<option/>").attr("value", data.Id).text(data.ProductDescription));
        });
    });
});
};

我很确定它与我迭代tr标签的方式有关，但我无法弄清楚如何使每一行彼此独立。

Answer 1

您不需要.each()功能

尝试这种方式 -

var monitorProCodeChange = function () {
    // monitor select code change
    $("select[name=prodCode]").change(function () {
        alert("change event fired");
        var prodCode = $(this);
        var product = $(this).closest('tr').find("select[name=product]");
        $.getJSON("/api/product/getproductbyid/" + prodCode.val(), function (data) {
            product.append(
            $("<option/>").attr("value", data.Id).text(data.ProductDescription));
        });

    });
};

如何基于一个选择更改进行单个$ .getJSON调用

1 个答案: