Javascript 更改同级时如何替换select标记

我有三个（级联）select标记，它们在一个div中一个接一个地出现。它们的html仅在选项上有所不同。select的名称和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>

---

通常我会有我需要替换的select的id或类，这很容易。这里的问题是，由于所有三个select都具有相同的id和名称，如何在所选的select之后识别select？谢谢。

你可以这样做

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

---

id

对于每个元素都应该是唯一的。@absolutskyy-我很好奇..为什么所有select标记都有相同的名称/id？这是你能控制的吗？如果是的话，你应该尽快让它们变得独一无二。否则，随着项目的发展，你会继续遇到这样的问题。你说得很对。选择是元编程的，这不是它应该工作的方式，但我现在改变了选择有不同的ID，所以这使它非常容易。谢谢@dipen感谢帮助。请看我上面的评论。

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