चुनिंदा बॉक्स में एक पूरे ऑप्टग्रुप का चयन करने का आसान तरीका

Question

मेरे पास एक चुनिंदा बॉक्स है जिसमें मैं कई विकल्प चुन सकता हूं। चयन बॉक्स में एकाधिक optgroups हैं। जावास्क्रिप्ट में एक बार में एक संपूर्ण optgroup का चयन करने का कोई आसान तरीका है?

Answer 1

मैं jQuery (या किसी अन्य ढांचे) उपयोग करने का सुझाव जल्दी से डोम चयन को संभालने के लिए। प्रत्येक ऑप्टग्रुप को कक्षा को इसे पकड़ना आसान बनाने के लिए दें।

$("optgroup.className").children().attr('selected','selected'); 

आप पूरे समूह का चयन उपयोगकर्ता के आधार पर समूह का चयन करना चाहते हैं, निम्न कार्य करें:

$("optgroup.className").select(function(e) { 
    $(this).children().attr('selected','selected'); 
}); 

** दोनों उदाहरण अपरीक्षित छद्म कोड हैं, लेकिन वे कम से कम के साथ काम करना चाहिए यदि आवश्यक हो तो परिवर्तन।

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

Answer 2

jQuery:

$('#myoptgroup option').attr('selected', true); 

Answer 3

मैं सामान्य रूप से इस तरह की साधारण नौकरियों के लिए jQuery का उपयोग करने के खिलाफ हूं लेकिन मैं इसका मूल्य यहां देख सकता हूं। फिर भी, यदि आप एक गैर jQuery समाधान, कोई लाइब्रेरी का उपयोग कर कोई नकली आईडी या वर्गों को शुरू करने और तेजी से चलाने का लाभ होगा कि पसंद करते हैं, यहाँ एक है:

<script type="text/javascript"> 

function selectOptGroupOptions(optGroup, selected) { 
    var options = optGroup.getElementsByTagName("option"); 
    for (var i = 0, len = options.length; i < len; i++) { 
     options[i].selected = selected; 
    } 
} 

function selectOptGroup(selectId, label, selected) { 
    var selectElement = document.getElementById(selectId); 
    var optGroups = selectElement.getElementsByTagName("optgroup"); 
    var i, len, optGroup; 
    for (i = 0, len = optGroups.length; i < len; i++) { 
     optGroup = optGroups[i]; 
     if (optGroup.label === label) { 
      selectOptGroupOptions(optGroup, selected); 
      return; 
     } 
    } 
} 

</select> 

<select id="veg" multiple> 
    <optgroup label="roots"> 
     <option>Swede</option> 
     <option>Carrot</option> 
     <option>Turnip</option> 
    </optgroup> 
    <optgroup label="leaves"> 
     <option>Spinach</option> 
     <option>Kale</option> 
    </optgroup> 
</select> 

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots"> 

तुम कर सकते हो यदि आपका <optgroup> एक आईडी है selectOptGroup फ़ंक्शन के साथ दूर करें और बस ऑप्टग्रुप को सीधे selectOptGroupOptions पर पास करें।

Answer 4

मैं अभी कुछ ऐसा करने की कोशिश कर रहा था।

मैं समूह के लेबल पर क्लिक करने पर <optgroup> के <option> एस का चयन करना चाहता था। पहला प्रयास इस तरह से चला गया:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

यह समाधान आधा काम किया ...

<optgroup> के लेबल अपने बच्चों की सभी चयनित हो गया क्लिक करने पर।

लेकिन जब बस एक <option> यह अभी भी समूह में सभी अन्य <option> रों का चयन किया गया था पर क्लिक! समस्या घटना बुलबुला थी, क्योंकि <option><optgroup> तकनीकी रूप से आप इसे भी क्लिक कर रहे हैं।

इसलिए पहेली का अंतिम भाग इस घटना में ऊपर की ओर इशारा करते हुए दबाने के लिए था कि <option> वास्तव में इसके बजाय क्लिक किया गया था। अंतिम समाधान तब बन गया:

$('select > optgroup').click(function() { 
    $(this).children().attr('selected', true); 
}); 

$('select > optgroup > option').click(function (e) { 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}); 

नौकरी की गई!

संपादित

infuriatingly इस IE8 में काम काम नहीं करता है (और संदिग्ध < IE8 - शायद IE9) ...

यह दोनों और तत्वों पर क्लिक घटनाओं को पूरी तरह से अनदेखा करने का निर्णय लेता है। एकमात्र विकल्प जिसे मैं सोच सकता हूं, क्लिक को कैप्चर करने के लिए ऑप्टग्रुप लेबल के ऊपर तत्वों को स्थान देना है, लेकिन संभवतः यह प्रयास के लायक नहीं है ...