JQuery 函数，适用于在表单集中创建的表单

Question

我有一个JQuery函数，它可以按预期在表单集中的单个表单上工作，以创建链接的下拉列表。

$("#id_form-0-state").change(function () {
var stateId = $(this).val();
$.ajax({
url: "{% url 'subscriptions:relevantStates' %}",
data: {
'id': stateId
},
success: function (data) {
$("#id_form-0-counties").html(data);
}
});
})

在"#id_form-"+ i +"-state"的表单集中可能有多达 50 个表单，虽然我可以复制/粘贴函数 50 次以考虑 i 的所有可能性，但必须有一种更简单的方法。

我是JQuery的新手，所以如果这很明显，请原谅我。 我已经寻找解决方案几天了，但我在文档中找不到任何关于如何修改"#id_form-"+ i +"-counties"的问题，因为它不是表格中"#id_form-"+ i +"-state"的子级。

Answer 1

如果其他人遇到这种情况，我通过使用"属性以选择器结尾"来使其工作，如此处所述。 然后，我必须解析触发的jQuery对象以获取原始id，以便能够重建完整id，以使用返回的ajax数据填充链接的下拉项。

$('select[id$="-state"]').change(function () {
var stateId= this.value;
var str = this.id;
var foo = str.split("-");
formId = foo[1];
$.ajax({
url: "{% url 'subscriptions:relevantCounties' %}",
data: {
'id': stateId
},
success: function (data) {
$("#id_form-"+ formId +"-counties").html(data);
}
});
})