"का चयन करें/चयन रद्द करें" कई चुनिंदा क्षेत्रों

Question

मैं एक तालिका स्तंभ में परिभाषित किया गया एक बहु का चयन करें फ़ील्ड हैं,

<table border=1> 
    <tr> 
     <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td> 
    </tr> 
    <tr> 
    <td id="select_project"> 
     <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10"> 
     <option value="1">Project 1</option> 
     <option value="2" selected="selected">project 2</option> 
     <option value="3">Project 3</option> 
    </select> 
    CLICK HERE SHOULD "UNSELECT" 
</td> 
</tr> 
</table> 

मैं सुविधा चाहते हैं कि जब चयन के अलावा स्तंभ के स्थान पर उपयोगकर्ता क्लिक क्षेत्र, सभी चयनित विकल्प नहीं चुना जाता स्थिति के लिए वापस चाहिए, मैं निम्नलिखित jQuery का इस्तेमाल किया है लागू करने के लिए,

$("#select_project").bind('click', function(){ 
    $('#projects option').attr('selected', false); 
    return false; 
}); 

यह काम करता है लेकिन यह भी चयन क्षेत्र प्रभावित करते हैं, कि जब उपयोगकर्ता एक विकल्प का चयन है, यह तुरंत नहीं चुना जाता पर पूर्ववत स्थिति स्वचालित रूप से, इस से छुटकारा पाने के लिए कैसे?

Answer 1

हां निश्चित रूप से उपयोगकर्ता ने ड्रॉप डाउन सूची से कुछ चुनने के तुरंत बाद चयनित मूल्य को साफ़ कर दिया होगा।

आपने .click() फ़ंक्शन से प्रभावित क्षेत्र के अंदर <select> रखा है। इसलिए जब भी उपयोगकर्ता कुछ चुनने के लिए ड्रॉप डाउन सूची पर क्लिक करता है, तो आपका फ़ंक्शन चलाया जाता है - और चयन साफ़ हो जाता है।

आपको यूआई को बदलना होगा ताकि चयन को साफ़ करने के लिए क्लिक करने के लिए स्थान कहीं और है।

Answer 2

अच्छा हाँ, आपने ईवेंट को पूरे टेबल सेल में बांध दिया, जहां चयन बॉक्स और टेक्स्ट हैं, इसलिए यह दोनों को प्रभावित करता है। फिक्स्ड कोड:

<table border=1> 
    <tr> 
     <td>THIS IS THE PLACE TO SELECT THE PROJECTS</td> 
    </tr> 
    <tr> 
    <td id="select_project"> 
     <select class="projects" id="projects" multiple="multiple" name="projects[]" size="10"> 
     <option value="1">Project 1</option> 
     <option value="2" selected="selected">project 2</option> 
     <option value="3">Project 3</option> 
    </select> 
    <a href="#" id="unselect">CLICK HERE SHOULD "UNSELECT"</a> 
</td> 
</tr> 
</table> 

$("#unselect").bind('click', function(){ 
    $('#projects option:selected').removeAttr("selected");; 
    return false; 
}); 

Answer 3

Drupal 7 में आप जब आप पहली बार सलेक्ट बॉक्स पर क्लिक करें आदेश का चयन रद्द करें दो अन्य selectboxes नाम संपादित-टीआईडी ​​-3 और संपादित-टीआईडी ​​-4 बनाने के लिए निम्नलिखित लिखने की आवश्यकता है (संपादन-टीआईडी -2)

jQuery("#edit-tid-2").bind('click', function(){ 
       jQuery('#edit-tid-3 option:selected').removeAttr("selected"); 
         jQuery('#edit-tid-4 option:selected').removeAttr("selected"); 
         return false; 
    }); 

Answer 4

मेरे दृष्टिकोण, थोड़े अलग होगा, एक नया बटन/अनचेक करने के लिए लिंक जोड़ने के लिए बिना, चुनें क्लिक पर ही निर्भर करता है, तो कोई भी नहीं है, <select></select> करने के लिए एक sel_val विशेषता जोड़ने के बारे में परवाह है पाठ्यक्रम के सभी $(function(){ //HERE });:

$('select[multiple=multiple]').on('click',function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var selectedOpts = $("option:selected",$this); 
    if(selectedOpts.length == 1){ 
     selectedOpts.each(function(){ 
      if($this.attr('sel_val') == $(this).val()){ // if clicking 2nd time on this 
       selectedOpts.removeAttr('selected'); 
       $this.removeAttr('sel_val'); 
       $this.trigger('blur'); 
      }else // if clicking for the first time 
       $this.attr('sel_val',$(this).val()); 
     }); 
    } 

}); 

$('select[multiple=multiple]').each(function(){ 
    var $this = $(this); 
    var selectedOpts = $("option:selected",$this); 
    if(selectedOpts.length == 1){ // if one item selected only, make it unselectable 
     selectedOpts.each(function(){ 
      $this.attr('sel_val',$(this).val()); 
     }); 
    } 
}); 

Answer 5

दुष्प्रभाव पैदा किए बिना इस समस्या को हल करने का सबसे अच्छा तरीका बोले कोड का उपयोग करना है।

$("select[multiple] option") 
.attr({"d_sel":false,"selected":false}) 
.mouseover(function(){this.d_sel=this.selected;}) 
.click(function(){this.d_sel=(this.selected=(!this.d_sel));});