刪除選項

Question

<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

$(".one").change(function(){ 

}) 

我想作 - 例如，如果我選擇第一個位置選項1，那麼我其他人選擇此選項應該被刪除。 所以，如果我在第一次選擇我選擇1然後在選擇第二和第三我只有選項2和3.如果在第二選擇我選擇2然後在上次選擇我只有選項3.

我該如何使它？我想使用jQuery。

LIVE：http://jsfiddle.net/9N9Tz/1/

Answer 1

如果需要排序的東西，可以考慮使用類似jQuery UI sortable作爲一羣降下來菜單使真正的窮人UX爲。

但是，爲了回答你的問題：

var $selects = $('.one'); 
$selects.on("keyup click change", function(e) { 
    $selects.not(this).trigger('updateselection'); 
}).on("updateselection", function(e, data) { 
    var $this = $(this); 
    $this.children().show(); 
    $selects.not(this).each(function() { 
    var value = $(this).val(); 
    if (value) { 
     $this.children('[value="' + value + '"]').hide(); 
    } 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select class="one"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

隱藏的選項工作在當前的Firefox。我不確定舊版瀏覽器。隱藏但不刪除元素可確保您可以更改選擇，而不會削弱您的輸入元素。

Answer 2

如果您使用不同類第二和第三選擇元素

$(".one").change(function(){ 
    var val = parseInt($(this).val()); 
    $('.two,.three').find('option:contains('+val+')').remove(); 
}); 

編輯它會很容易：
更新代碼，以申請多個選擇。 [感謝帶上所有評論家和Alex它注意到]

$(".one").change(function(){ 
     var val = parseInt($(this).val()); 
     $(this).siblings().find('option:contains('+val+')').remove(); 
    }); 

Answer 3

這裏你去http://jsfiddle.net/Calou/9N9Tz/6/。

當<select>的值發生變化時，只需取該值並在其他<select> s中搜索<option> s並將其除去。

$(".one").change(function(){ 
    var val = this.value 
    if (val !== '') { 
     $(this).siblings().find('option[value=' + val + ']').remove() 
    } 
}) 

Answer 4

// As soon as all selects have one class, you'll have to distinguish them: 
$(".one").each(function() { 
    // Now this corresponds to one select (in the loop over all) 
    $(this).change(function() { 
     // Fix what've done before 
     $('option').show(); 
     // Find every other select, find an option in it 
     // that has the same value that is selected in current select 
     // (sorry for the description) 
     $('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide(); 
    }); 
})​;​ 

jsFiddle