ユーザーが色を選択してから、その色のカテゴリから物を選択できる単純なフォームがあります。2 番目の選択入力は、最初の入力に基づいて更新されます。
IDに基づいて最初の要素をターゲットにし、IDが指定されたときにそれに応じて次の要素を変更できるjQueryスクリプトがあります。これを再利用可能なスクリプトにして、ANY 選択を選択し、それに応じて 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があります。だから私は、1つが変更されたときにNEXTがターゲットになるようにしたい. IDやクラスに頼ることはできません。
<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>