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

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

这将所有家长选择元素设置为默认值。