jQuery चुना गया: 1 विकल्प मान का चयन कैसे करें और इसे किसी अन्य चयन-मेनू में हटा दें?

Question

मैंने एक दूसरे के बगल में 2 तत्व रखे हैं। वे दोनों jQuery चुना प्लगइन का उपयोग कर रहे हैं।

<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> 

यह जावास्क्रिप्ट है:

इस कोड है। jQuery लाइब्रेरी, नवीनतम चुने गए प्लगइन और सीएसएस सभी ठीक से शामिल हैं।

<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> 

यही वह है जो मैं ऊपर लिपि के साथ पूरा करना चाहता हूं।

• समान मूल्य वाले दो चयन तत्व हैं। उदाहरण के लिए तत्व 1 में "1" का चयन किया गया है, उदाहरण के लिए, मैं इसे तत्व 2 में अक्षम करना चाहता हूं।
• हालांकि। तत्व 1 में मान "1" को अचयनित करने के बाद, यह अभी भी तत्व 2 में अक्षम है। यही वह नहीं है जो मैं चाहता हूं। दूसरे तत्व में मान को अचयनित करने के बाद अन्य मान फिर से उपलब्ध होना चाहिए।

क्या कोई यह जानता है कि इसे कैसे पूरा किया जाए?

संपादित

मैं अब तक एक JSFiddle सही यहाँ डाल दिया है: http://jsfiddle.net/dq97z/3/। कोई भी सहायताकाफी प्रशंसनीय होगी!

Answer 1

कुछ इस तरह यह करना चाहिए:

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

चूंकि आप पहले ड्रॉपडाउन में चुने गए विकल्प को संशोधित कर रहे हैं, इसलिए पिछले विकल्प अक्षम किए गए विकल्प फिर से सक्षम नहीं हैं।

आपको पहले सभी विकल्पों को सक्षम करने की आवश्यकता है और फिर केवल चयनित विकल्प अक्षम करें।

इस कोड को मैं विकलांग पिछले मूल्य के आधार पर विशेषता बदली में इस

$('.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

आप हर परिवर्तन पर विकलांग निर्धारित करते हैं, बिल्कुल यह काम नहीं करेगा का प्रयास करें ...;

<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

मैं इतना के लिए प्रत्येक का चयन केवल एक ही विकल्प चुना जा सकता है एकाधिक विकल्प के बिना इस कोड का उपयोग करने के लिए कोशिश कर रहा हूँ। मैं allow_single_deselect का उपयोग करना चाहता हूं: चयन बॉक्स में चुने गए विकल्प को निकालने के लिए सही कोड लेकिन मैं इसे काम नहीं कर सकता। मैंने खोज विकल्प अक्षम कर दिया क्योंकि मुझे इस पृष्ठ पर इसकी आवश्यकता नहीं है।

<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>