我有几个包含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标签的方式有关,但我无法弄清楚如何使每一行彼此独立。
答案 0 :(得分:2)
您不需要.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));
});
});
};