एकाधिक और optgroups

Question

के साथ चुनिंदा मेनू में चयनित विकल्पों का चयन रद्द करें मैं एक चयन मेनू में सभी पूर्व-चयनित विकल्पों को अचयनित करने में सक्षम होना चाहता हूं ताकि एकाधिक चयन सक्षम और विकल्प समूहों के साथ चयन मेनू में सभी पूर्व-चयनित विकल्पों को अचयनित कर सकें।

<select name="ddBusinessCategory" id="ddBusinessCategory" class="f1" style="width:280px;height:200px" multiple="multiple"> 
<option value="">Select One</option> 
<optgroup label="Abrasives" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="4" selected="selected">Abrasives</option> 
</optgroup> 
<optgroup label="Abstracters" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="5">Abstracters</option> 
</optgroup> 
<optgroup label="Abuse Information &amp; Treatment Centers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="6" selected="selected">Abuse Information &amp; Treatment Centers</option> 
</optgroup> 
<optgroup label="Accountants" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="7">Accountants</option> 
<option value="2672">Certified Public Accountants - </option> 
<option value="2673">Public Accountants - </option> 
</optgroup> 
<optgroup label="Accounting Services" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="8">Accounting Services</option> 
</optgroup> 
<optgroup label="Acoustical Materials - Wholesale &amp; Manufacturers" style="background:#F5F5F5;border-bottom:1px #EEE solid"> 
<option value="9">Acoustical Materials - Wholesale &amp; Manufacturers</option> 
</optgroup> 
</select> 

आप दो चुने गए हैं देखेंगे .. मैं इन पूर्वचयनित लोगों का चयन रद्द करने में सक्षम होना चाहते:

यहाँ मेनू का एक उदाहरण है।

न jQuery का उपयोग करना चाहते हैं, बस आपकी सहायता के लिए जावास्क्रिप्ट

बहुत धन्यवाद उपयोग करना चाहते हैं।

neojakey

Answer 1

निम्नलिखित समारोह सभी विकल्पों के माध्यम से पाश और उन्हें चयन रद्द करना चाहिए।

एचटीएमएल

<a href="#" onclick="clearSelected();">clear</a> 

JAVASCRIPT

function clearSelected(){ 
    var elements = document.getElementById("ddBusinessCategory").options; 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].selected = false; 
    } 
    } 

संपादित:

मैं तत्व पर सीधे ईवेंट हैंडलर डालने का समर्थन नहीं करते। यदि आपके पास विकल्प है, तो तत्व को कुछ प्रकार का आईडी/नाम दें और ईवेंट जावास्क्रिप्ट को अपने जावास्क्रिप्ट कोड में बाध्य करें।

EXAMPLE

Answer 2

आप के बारे में < IE8 परवाह नहीं है, तो:

var checkedElements = document.querySelectorAll("#ddBusinessCategory :checked"); 

​for(var i = 0, length = checkedElements.length; i < length; i++) { 
    checkedElements[i].selected = false; 
}​ 

आप < के बारे में IE9

Array.prototype.forEach.call(document.querySelectorAll("#ddBusinessCategory :checked"), function(el) { el.selected = false }); 

उपयोग चेस से जवाब परवाह नहीं है अगर आप IE7, IE6, FF3 और इससे पहले का समर्थन करना चाहते हैं या महसूस करना आसान है।

Answer 3

आप जावास्क्रिप्ट संपत्ति "selectedOptions"

HTML के साथ चेस से कोड को आसान बनाने में कर सकता है

<a href="#" onclick="clearSelected();">clear</a> 

JAVASCRIPT

function clearSelected(){ 
    var elements = document.getElementById("ddBusinessCategory").selectedOptions; 

    for(var i = 0; i < elements.length; i++){ 
     elements[i].selected = false; 
    } 
    } 

इस मामले आप के साथ एक पाश कर में पहले से चुने गए विकल्प और सभी विकल्प नहीं।

Answer 4

आप jQuery का उपयोग कर रहे आप कर सकते हैं (मैं जो व्यक्ति से पूछा कि यह एक js जवाब की उम्मीद है जानते हैं, लेकिन यह कोई मदद कर सकता है)

$('#someid').find($('option')).attr('selected',false) 

Answer 5

आप केवल केवल चयनित विकल्पों के माध्यम से पाश चाहते हैं, तो मैं थोड़ी देर लूप का सुझाव देता हूं।

var elements = document.getElementById("ddBusinessCategory").selectedOptions; 
while (elements.length > 0) 
{ 
    elements[0].selected = false; 
} 

मिशेल Sahli द्वारा जवाब जब वहाँ एकाधिक चयन, क्योंकि जैसा कि आप पाश के लिए elements.length परिवर्तन के मूल्य के माध्यम से प्रगति कर रहे हैं काम नहीं करेगा।

उस ने कहा, .selectedOptions विशेषता थोड़ा परेशानी है (Is selectedOptions broken or...? देखें) तो शायद चयनित विकल्पों के माध्यम से केवल लूपिंग द्वारा प्राप्त की जाने वाली छोटी बचत के लायक नहीं है।

Answer 6

यह सिर्फ

document.getElementById("ddBusinessCategory").value = ""; 

Answer 7

उपयोग करने के लिए ?: आप किसी भी छोरों की जरूरत नहीं है आसान नहीं होगा। चयनित इंडेक्स संपत्ति "Sets or returns the index of the selected <option> element in the collection (starts at 0)"।
इंडेक्सिंग 0 से शुरू होता है, इसलिए यदि आप इसे -1 पर सेट करते हैं तो कोई भी नहीं चुना जाता है। (0 पर सेट करने से पहला विकल्प चुना जाएगा।)

function clearSelected(w){ 
    document.getElementById(w).selectedIndex = -1; 
} 
<a href="#" onclick="clearSelected('ddBusinessCategory');">clear</a>