jquery - 几个选择 - 选择一个选择时，请选择剩余的选择

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

示例小提琴

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);
    })
});

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