幾個選擇 - 當選擇一個選項中的選項時重置剩餘選擇

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

這將所有家長選擇元素設置爲默認值。