javascript - How to replace a select tag when sibling is changed

Question

I have three (cascading) select tags that appear one after another in a div. The html for them only differ in the options. The name and ids of the select are the same.

<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>

The behavior I need is when a select is changed, an ajax call is made which provides the data (markup) for the next select. The data I get back which is markup a select and it's options is fine but am having issues replacing the next select.

$('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
    });
    ...

Usually I would have the id or class of the select I need to replace and would be easy. THe issue here is since all three select have the same id and name how can i identify the select after the one that is selected? Thanks.

Answer 1

你可以做这样的事情..

$('select#foo').live("change", function() {

    var optionSelected = $('option:selected', this);
    var selID = optionSelected.val();
    var nextSelect = $(this).next();

    $.post('/postUrl?data=selID', function(data) {
      // do action with nextSelect
      nextSelect.doSomething;
    });