Question

我有一个包含多个选择框的页面。我希望能够在其中一个选择框中选择一个选项时将其他选项重置为默认状态。我在这里做了一个例子：FIDDLE。

但是如何捕获所选选项及其父选择框？

我尝试过类似的事情：

<div class="selects">
<select>
  <option value="">- Select -</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
</div>
<div class="selects">
<select>
  <option value="">- Select -</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
</div>
<div class="selects">
<select>
  <option value="">- Select -</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
</div>

并且：

$('.selects option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);
$('.selects select').change(function() {
    $(this, "option:first").attr('selected','selected');
});

默认状态始终是每个选择框中的第一个选项。

Answer 1

要重置其他选择，您需要从选择器中排除当前值并将val()设置回默认值。试试这个：

$('.selects select').change(function() {
    $('.selects select').not(this).val('');
});

Example fiddle

Answer 2

这就是我写javascript部分的方式..

$('.selects option[selected]').removeAttr('selected');
$('.selects select').change(function(e) {
    // relative lookup
    $(this).parent().siblings().find('select').each(function(e,i){
        $(this).prop("selectedIndex", 0);
    });
});

Answer 3

也许是这样的：

$('.selects select').change(function() {
    $(this).closest("div").prevAll().each(function() {
        $(this).find("select option:first").prop("selected", true);
    })
});

这会将所有父选择元素设置为其默认值。

多个选择 - 当选择一个选项中的选项时，重置剩余选择

3 个答案: