我有一个简单的表单，用户可以在其中选择一种颜色，然后从该颜色类别中选择一个东西。第二个选择输入基于第一个输入进行更新。
我有一个 jQuery 脚本，它允许我基于 id 定位第一个元素，并在指定它的 id 时相应地更改下一个元素。现在我想把它变成一个可重用的脚本，这样我就可以选择任何选择并相应地更新 NEXT 选择。我可以处理内部逻辑（url、GET 参数）。
在我的 jQuery 脚本中：获取参数），但我不知道如何在选定元素之后定位下一个选择元素（我尝试使用 next() 但它不起作用）。
$(document).ready(function () {
var nextSelect = $('#id_colour');
nextSelect.change(function () {
function updateChoices() {
var selected = nextSelect.val();
if (selected) {
// this line shown for completeness - will be refactored
$.getJSON(url, {
colour_id: selected
}, function (data, jqXHR) {
var options = [];
for (var i = 0; i < data.length; i++) {
output = '<option value="' + data[i].id + '"';
if (nextSelect.val() == data[i].id) {
output += ' selected="selected"';
}
output += '>' + data[i].name + '</option>';
options.push(output);
}
$('#id_thing').html(options.join(''));
});
}
}
updateChoices();
$('#id_thing').change(updateChoices);
});
});
非常感谢任何帮助。
编辑 这里是html。所以我希望当一个被改变时，NEXT 将成为目标。我不能依赖 ids 或 classes。
<form action="" method="post">
<!-- colour -->
<div class="form_div">
<p><label for="colour">Colour:</label></p>
<p>
<select name="colour" id="id_colour">
<option value="" selected="selected">---------</option>
<option value="1">Green</option>
<option value="2">Brown</option>
<option value="3">Blue</option>
</select>
</p>
</div>
<!-- thing -->
<div class="form_div">
<p><label for="thing">Thing:</label></p>
<p>
<select name="thing" id="id_thing">
<option value="" selected="selected">---------</option>
<option value="1">Branch</option>
<option value="2">Leaf</option>
<option value="3">Sky</option>
</select>
</p>
</div>
<p><input type="submit" value="Submit Choice" /></p>
</form>