jQuery के साथ बहु-चयन में किसी विकल्प का चयन टॉगल कैसे करें?

Question

मैं उदाहरण के लिए एक मानक select multiple एचटीएमएल इनपुट क्षेत्र है,:

<select multiple="multiple" size="5" id="mysel" name="countries"> 
    <option value="2">Afghanistan</option> 
    <option value="4">Aland</option> 
</select> 

इस के रूप में एक से अधिक मूल्य आप CTRL कुंजी दबाकर रखें और किसी भी आगे तत्वों का चयन करने के लिए है का चयन करने के लिए, एक बहु-चयन है।

1. एक का चयन रद्द किया विकल्प क्लिक करने का चयन करता है यह
2. क्लिक करने से एक चयनित विकल्प यह unselects: हालांकि मैं क्या हासिल करना चाहते हैं वह यह है कि,।

विचार CTRL कुंजी दबाएँ और इस इनपुट क्षेत्र के उपयोग के अर्थ विज्ञान को बदलने के लिए होने से बचने के लिए है। तत्वों को केवल चयन करके चयन योग्य और अन-चयन योग्य होना चाहिए (यानी चुनिंदा स्थिति की टॉगलिंग)।

मैं अभी तक इसे लागू करने में सक्षम नहीं हूं। छद्म कोड इस तरह कुछ दिखना चाहिए।

1. एक क्लिक ईवेंट पकड़ें।
2. जांचें कि क्लिक किए गए तत्व को अचयनित किया गया था, फिर इसे
3. चुनें या यदि क्लिक किया गया तत्व चुना गया था, तो इसे अचयनित करें।

मुझे इसे कैसे कार्यान्वित करना चाहिए?

Answer 1

आप jQuery, के पुराने संस्करणों जहां prop() उपलब्ध नहीं था में अपने वांछित प्रभाव

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.prop("selected")) 
      $self.prop("selected", false); 
    else 
     $self.prop("selected", true); 

    return false; 
}); 

प्राप्त करने के लिए निम्नलिखित स्निपेट का उपयोग हो सकता है:

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.attr("selected")) 
      $self.attr("selected", ""); 
    else 
     $self.attr("selected", "selected"); 

    return false; 
}); 

Answer 2

आप कई इनपुट फ़ील्ड का चयन करने के डिफ़ॉल्ट व्यवहार को बदलने में सही हैं। वे उपयोगकर्ता अनुभव की ओर नकारात्मक रूप से योगदान देते हैं क्योंकि उद्देश्य स्पष्ट रूप से व्यक्त नहीं किया जाता है और उपयोगकर्ता समझ नहीं सकते कि उन्हें सही तरीके से कैसे उपयोग किया जाए।

एक बहु-चयन बॉक्स का पुन: उद्देश्य सही नहीं है। यदि आप एकाधिक एकाधिक का उपयोग करने पर विचार कर रहे हैं, तो हो सकता है कि आप अपने डिज़ाइन को दोबारा बदलना चाहें। शायद आप इसके बजाय चेकबॉक्स का उपयोग कर सकते हैं?

यहाँ विषय पर एक लेख है: http://www.ryancramer.com/journal/entries/select_multiple/

Answer 3

शायद कुछ jQuery नए संस्करणों के साथ कुछ फिक्स आ रहा है:

$("select[multiple] option").mousedown(function(){ 
    var $self = $(this); 

    if ($self.attr("selected")){ 
     $self.removeAttr("selected"); 
    } else { 
     $self.attr("selected", "selected"); 
    } 
    return false; 
}); 

Answer 4

एक और प्रकार JQuery के बिना:

var multiSelect = {}; 

function init() {  
    var s = document.getElementsByTagName('select'); 
    for (var i = 0; i < s.length; i++) { 
    if (s[i].multiple) { 
     var n = s[i].name; 
     multiSelect[n] = []; 
     for (var j = 0; j < s[i].options.length; j++) { 
     multiSelect[n][j] = s[i].options[j].selected; 
     } 
     s[i].onclick = changeMultiSelect; 
    } 
    } 
} 

function changeMultiSelect() { 
    var n = this.name; 
    for (var i=0; i < this.options.length; i++) { 
    if (this.options[i].selected) { 
     multiSelect[n][i] = !multiSelect[n][i]; 
    } 
    this.options[i].selected = multiSelect[n][i]; 
    } 
} 

window.onload = init; 

Answer 5

jQuery 1.9.1 जावास्क्रिप्ट कोड का उपयोग करना है:

$("select[multiple] option").mousedown(function() { 
     var $self = $(this); 
     if ($self.prop("selected")) 
      $self.removeAttr("selected"); 
     else 
      $self.attr("selected", "selected"); 
     return false; 
    }); 

Answer 6

मैं सिर्फ इस समाधान की कोशिश की और चयनित जवाब jQuery के 1.9 के लिए काम नहीं किया।1

ऑस्कर से जवाब काफी बेहतर देखा लेकिन यह गुण और काम नहीं करता है के साथ मिश्रित गुण यदि आप का चयन करें, का चयन रद्द उसके बाद फिर से चयन करने के लिए के रूप में यह एक व्यर्थ राज्य में चयन डालता

मैं पाया है की कोशिश मेरे लिए सही जवाब निम्नलिखित

$("select[multiple] option").mousedown(function() { 
     if ($(this).prop("selected")) 
      $(this).prop("selected", false); 
     else 
      $(this).prop("selected", true); 
     return false; }); 

मुझे आशा है कि इस मदद करता है दूसरों था;)

Answer 7

जावास्क्रिप्ट (jQuery के बिना):

var select = document.getElementById('mysel'); 
select.addEventListener('mousedown', function(e){ 
    var opt = e.target; 
    if (opt.selected){ 
     opt.removeAttribute('selected'); 
     opt.selected = false; 
    } else { 
     opt.setAttribute('selected', ''); 
     opt.selected = true; 
    } 
    e.preventDefault(); 
}); 

मुझे लगता है कि उपरोक्त में से अधिकांश उत्तरों चयन के बजाए विकल्प के साथ ईवेंट को बाध्य कर रहे हैं। अगर मेरे चयन में 1000 विकल्प हैं, तो यह 1000 घटनाओं को बांध देगा, क्या यह प्रदर्शन को प्रभावित करेगा?

इस वजह से मैं भी विकल्प में अपनी घटना को बांधने का फैसला नहीं करता हूं।