jQuery Seçilen: 1 seçenek değeri nasıl seçilir ve aynı menüden diğerini kaldırır?

Question

Yan yana 2 öğe ekledim. Her ikisi de jQuery Seçilmiş eklentiyi kullanıyor.

<div class="wrapper"> 
    <select data-placeholder="Number row 1" style="width:350px;" multiple class="chzn-select"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    </select> 

    <select data-placeholder="Number row 2" style="width:350px;" multiple class="chzn-select"> 
    <option value=""></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    </select> 
</div> 

Bu JavaScript geçerli:

Bu

kodudur. jQuery kütüphanesi, en son Chosen eklentisi ve CSS'nin hepsi uygun şekilde dahil edilmiştir.

<script> 
$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled'); 
}); 
</script> 

Bu, yukarıdaki komut dosyasıyla gerçekleştirmek istediğim şeydir.

• Aynı değerlere sahip iki seçim öğesi vardır. Örneğin, eleman 1'de "1" değeri seçildiğinde, bunu 2. öğe içinde devre dışı bırakmak istiyorum.
• Ancak. 1. öğe için "1" değerini kaldırdıktan sonra, 2 öğesinde hala devre dışı bırakılmış. İstediğim bu değil. 1. elemandaki değerin seçimi kaldırıldıktan sonra diğer değer tekrar kullanılabilir olmalıdır.

Bunu nasıl gerçekleştireceğini bilen var mı?

DÜZENLEME

Ben şu anda burada JSFiddle kadar koyduk: http://jsfiddle.net/dq97z/3/. Herhangi bir yardım çok takdir edilecektir!

Answer 1

şey yapmalı: Her tek bir seçenek seçilebilir seçmek için birden çok seçenek olmadan bu kodu kullanmaya çalışıyorum

http://jsfiddle.net/musicisair/dq97z/10/

// cache selects for use later 
var selects = $('.chzn-select'); 

// whenever the selection changes, either disable or enable the 
// option in the other selects 
selects.chosen().change(function() { 
    var selected = []; 

    // add all selected options to the array in the first loop 
    selects.find("option").each(function() { 
     if (this.selected) { 
      selected[this.value] = this; 
     } 
    }) 

    // then either disabled or enable them in the second loop: 
    .each(function() { 

     // if the current option is already selected in another select disable it. 
     // otherwise, enable it. 
     this.disabled = selected[this.value] && selected[this.value] !== this; 
    }); 

    // trigger the change in the "chosen" selects 
    selects.trigger("liszt:updated"); 
}); 

Answer 2

İlk açılır menüde seçilen seçeneği değiştirdiğiniz için, devre dışı bırakılmış olan önceki seçenekler tekrar etkinleştirilmez.

Önce tüm seçenekleri etkinleştirmeniz ve sonra yalnızca seçilen seçeneği devre dışı bırakmanız gerekir. ... Bu

$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    var $options = $(this).parent().find('option').attr('disabled', false); 
    $options.filter('option[value="'+ selectedValue +'"]:not(:selected)') 
    .attr('disabled', true); 
}); 

Answer 3

Sen tabii o işe yaramaz, her değişiklikte devre dışı set önceki değerine dayalı engelli niteliğini değiştirmek Bu kodda

deneyin; Böyle

<script> 
$('.chzn-select').trigger("liszt:updated"); 
$('.chzn-select').chosen().change(function() { 
    var selectedValue = $(this).find('option:selected').val(); 
    $(this).parent().find('option[value="'+ selectedValue +'"]:not(:selected)') 
     .prop("disabled", function(i, val) { 
       return !val; 
      }); 
}); 
</script> 

Answer 4

. Seçme kutusunda seçili bir seçeneği kaldırmak için allow_single_deselect: true kodunu kullanmak istiyorum ancak çalışamıyorum. Arama seçeneğini devre dışı bıraktım çünkü bu sayfaya ihtiyacım yok.

<script>//<![CDATA[ 
$(function(){ 
$('.chzn-select').chosen({disable_search_threshold: 10}) .change(
function() { 
var selectedValue = $(this).find('option:selected').val(); 
$(this).parent().parent().find('option[value="'+ selectedValue +'"]:not(:selected)').attr('disabled','disabled'); 
$('.chzn-select').trigger("liszt:updated"); 
}); 

});//]]></script>