div に次々と表示される 3 つの (カスケード) select タグがあります。それらの html はオプションのみが異なります。選択の名前と ID は同じです。
<div class="dad">
<select id="foo" name="foo[bar]" value="myVal">
...
<option value="343">boom</option>
...
</select>
<select id="foo" name="foo[bar]" value="myVal">...</select>
<select id="foo" name="foo[bar]" value="myVal">...</select>
</div>
私が必要とする動作は、選択が変更されたときであり、次の選択のためのデータ (マークアップ) を提供する ajax 呼び出しが行われます。選択をマークアップしたデータとそのオプションは問題ありませんが、次の選択を置き換える際に問題が発生しています。
$('select#foo').live("change", function() {
var optionSelected = $('option:selected', this);
var selID = optionSelected.val();
$.post('/postUrl?data=selID', function(data) {
// need to replace the second select
});
...
通常、私は置き換える必要がある選択のIDまたはクラスを持っているので、簡単です。ここでの問題は、3 つの選択すべてが同じ ID と名前を持っているため、選択された後の選択をどのように識別できるかということです。ありがとう。