jquery - 如何根据一项选择更改进行单个 $.getJSON 调用

Question

我有几个包含选择标签的动态呈现的 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>

查询：

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

    });
};