ऑप्टग्रुप

Question

में सभी विकल्पों का चयन करें मेरे पास एस समूह के साथ select तत्व है। option पर क्लिक होने पर मुझे optgroup में सभी option एस चुनने (या अचयनित) करने की आवश्यकता है। मुझे एक साथ कई optgroup का चयन करने में सक्षम होना चाहिए।

तरह से मैं यह काम करना चाहते हैं यह है:

• कुछ भी नहीं चुना जाता है, मैं एक विकल्प पर क्लिक करें और चयनित एक ही optgroup में सभी विकल्पों को प्राप्त करना चाहते हैं।
• यदि एक या अधिक विकल्प समूह पहले ही चुने गए हैं, तो मैं किसी अन्य विकल्प समूह में एक विकल्प क्लिक करना चाहता हूं और इसके बजाय उन सभी विकल्पों को चुना गया है।
• यदि एक या अधिक विकल्प समूह पहले से ही चुने गए हैं, तो मैं एक गैर-चयनित ऑप्टग्रुप में एक विकल्प को Ctrl-क्लिक करने में सक्षम होना चाहता हूं और उस विकल्प समूह में भी सभी विकल्प चुने गए हैं।
• यदि एक या अधिक विकल्प समूह पहले ही चुने गए हैं, तो मैं किसी चयनित ऑप्टग्रुप में एक विकल्प को Ctrl-क्लिक करने में सक्षम होना चाहता हूं और उस समूह में सभी विकल्पों को अचयनित करना चाहता हूं।

स्टैक ओवरफ़्लो पर अन्य उत्तर को देखते हुए मैं निम्नलिखित बनाया:

HTML:

<select multiple="multiple" size="10"> 
    <optgroup label="Queen"> 
     <option value="Mercury">Freddie</option> 
     <option value="May">Brian</option> 
     <option value="Taylor">Roger</option> 
     <option value="Deacon">John</option> 
    </optgroup> 
    <optgroup label="Pink Floyd"> 
     <option value="Waters">Roger</option> 
     <option value="Gilmour">David</option>  
     <option value="Mason">Nick</option>     
     <option value="Wright">Richard</option> 
    </optgroup> 
</select> 

jQuery:

$('select').click(selectSiblings); 
function selectSiblings(ev) { 
    var clickedOption = $(ev.target); 
    var siblings = clickedOption.siblings(); 
    if (clickedOption.is(":selected")) { 
     siblings.attr("selected", "selected"); 
    } else { 
     siblings.removeAttr("selected"); 
    } 
}​ 

मैं यहाँ एक उदाहरण बना दिया: http://jsfiddle.net/mflodin/Ndkct/ (दुख की बात है jsFiddle अब IE8 का समर्थन नहीं कर रहा है।)

यह फ़ायरफ़ॉक्स (16.0) में अपेक्षित काम करता है, लेकिन आईई 8 में यह बिल्कुल काम नहीं करता है। अन्य उत्तरों से मुझे पता चला है कि IE8 click ईवेंट optgroup या option पर संभाल नहीं सकता है, यही कारण है कि मैं इसे select पर बांधता हूं और फिर $(ev.target) का उपयोग करता हूं। लेकिन आईई 8 में $(ev.target) अभी भी पूरे select पर इंगित करता है और option पर क्लिक नहीं किया गया था। मैं कैसे पता लगा सकता हूं कि option (या optgroup युक्त) जिसे क्लिक किया गया था और क्या इसे चुना गया था या अचयनित किया गया था?

एक और अप्रत्याशित व्यवहार, लेकिन तुलना में मामूली, यह है कि क्रोम (20.0) में अचयनित नहीं होता है जब तक कि माउस select छोड़ देता है। क्या इस के लिए कोई कामकाज जानता है?

Answer 1

आपकी समस्या के अनुसार सभी विकल्प का चयन/चयन रद्द करें। आप कोड का प्रयास कर सकते हैं, आपकी मदद कर सकते हैं।

कोड:

जावास्क्रिप्ट कोड:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> 

 $(function(){ 

       $('#allcheck').click(function(){ 
       var chk=$('#select_option >optgroup > option'); 
       chk.each(function(){ 
        $(this).attr('selected','selected'); 
      }); 
    }); 
$('#alluncheck').click(function(){ 

       var chk=$('#select_option >optgroup > option'); 
       chk.each(function(){ 
       $(this).removeAttr('selected'); 
      }); 
    });}); 

एचटीएमएल कोड:

 <select multiple="multiple" size="10" id="select_option" name="option_value[]"> 
      <optgroup label="Queen"> 
      <option value="Mercury">Freddie</option> 
      <option value="May">Brian</option> 
      <option value="Taylor">Roger</option> 
      <option value="Deacon">John</option> 
     </optgroup> 
     <optgroup label="Pink Floyd"> 
      <option value="Waters">Roger</option> 
      <option value="Gilmour">David</option>  
      <option value="Mason">Nick</option>     
      <option value="Wright">Richard</option> 
     </optgroup> 
</select> 
<br> 
     <strong>Select&nbsp;&nbsp;<a style="cursor:pointer;" id="allcheck">All</a> 
    &nbsp;|&nbsp;<a style="cursor:pointer;" id="alluncheck">None</a></strong> 

Answer 2

आशा इस काम करेंगे

$("#SelectID").live("click",function() { 
var elements = this.options; //or document.getElementById("SelectID").options; 
for(var i = 0; i < elements.length; i++){ 
    if(!elements[i].selected) 
    elements[i].selected = true; 
} 
} 

Answer 3

इस समस्या को ठीक है, आप केवल init चुना के बाद इस कोड को जोड़ने की जरूरत है।

$('.chzn-results .group-result').each(function() { 
    var self  = $(this) 
     , options = $('~li', self) 
     , next = options.filter('.group-result').get(0) 
    ; 
    self.data('chzn-options', options.slice(0, options.index(next))); 
}) 
.click(function() { 
    $(this).data('chzn-options').mouseup() 
}) 
.hover(function() { 
    $(this).data('chzn-options').addClass('highlighted'); 
}, function() { 
    $(this).data('chzn-options').removeClass('highlighted'); 
}) 
.css({ cursor: 'pointer' }) 

adriengibrat कि GitHub पर यह सुधार पोस्ट के लिए धन्यवाद:
https://github.com/harvesthq/chosen/issues/323

Answer 4

के बाद से इंटरनेट एक्सप्लोरर संस्करण 10 के रूप में अभी भी optgroup या option, के लिए किसी भी पार ब्राउज़र समाधान का कोई उपयोगी घटनाओं का समर्थन नहीं करता यह समस्या उन तत्वों से प्रत्यक्ष घटनाओं पर निर्भर नहीं हो सकती है।

नोट: MSDN प्रलेखीकरण का दावा है कि optgroupclick घटनाओं का समर्थन करता है, लेकिन आईई 10 के रूप में है कि अभी भी एक वास्तविकता प्रतीत नहीं होता: http://msdn.microsoft.com/en-us/library/ie/ms535876(v=vs.85).aspx

मैं क्रोम 27, फ़ायरफ़ॉक्स 20, सफारी 6 में निम्नलिखित का परीक्षण किया , आईई 9, और आईई 10 (मुझे वर्तमान में आईई 8 तक पहुंच नहीं है)। http://jsfiddle.net/potatosalad/Ndkct/38/

// Detect toggle key (toggle selection) 
$('select') 
    .on('mousedown', function(event) { 
     // toggleKey = Command for Mac OS X; Control for others 
     var toggleKey = (!event.metaKey && event.ctrlKey && !(/Mac OS/.test(navigator.userAgent))) ? event.ctrlKey : event.metaKey; 
     if (toggleKey === true) { 
      $(this).data('toggleKey', true); 
     } 
     $(this).data('_mousedown', true); 
    }) 
    .on('mouseup', function() { 
     $(this).data('_mousedown', null); 
    }); 
// Chrome fix for mouseup outside select 
$(document).on('mouseup', ':not(select)', function() { 
    var $select = $('select'); 
    if ($select.data('_mousedown') === true) { 
     $select.data('_mousedown', null); 
     $select.trigger('change'); 
    } 
}); 

$('select') 
    .on('focus', storeState) 
    .on('change', changeState); 

function storeState() { 
    $(this).data('previousGroup', $('option:selected', this).closest('optgroup')); 
    $(this).data('previousVal', $(this).val()); 
}; 

function changeState() { 
    var select = this, 
     args = Array.prototype.slice.call(arguments); 

    var previousGroup = $(select).data('previousGroup'), 
     previousVal = $(select).data('previousVal'); 
    var currentGroup = null, 
     currentVal = $(select).val(); 

    var selected = $('option:selected', select), 
     groups = selected.closest('optgroup'); 

    console.log("[change] %o -> %o", previousVal, currentVal); 

    if ((previousVal === currentVal) && (groups && groups.length == 1)) { 
     // selected options have not changed 
     // AND 
     // only 1 optgroup is selected 
     // -> do nothing 
    } else if (currentVal === null || currentVal.length === 0) { 
     // zero options selected 
     // -> store state and do nothing 
     storeState.apply(select, args); 
    } else { // a select/deselect change has occurred 
     if ($(select).data('toggleKey') === true 
      && (previousVal !== null && previousGroup !== null && groups !== null) 
      && (previousVal.length > currentVal.length) 
      && (previousGroup.length === groups.length) 
      && (previousGroup.get(0) === groups.get(0))) { 
      // options within the same optgroup have been deselected 
      // -> deselect all and store state 
      $(select).val(null); 
      storeState.apply(select, args); 
     } else if (currentVal.length === 1) { 
      // single option selected 
      // -> use groups 
      currentGroup = groups; 
     } else if (groups.length === 1) { 
      // multiple options selected within same optgroup 
      // -> use groups 
      currentGroup = groups; 
     } else { 
      // multiple options selected spanning multiple optgroups 
      // -> use last optgroup 
      currentGroup = groups.last(); 
     } 
    } 

    $(select).data('toggleKey', null); 

    if (currentGroup !== null) { 
     $('optgroup', select).not(currentGroup).children(':selected').attr('selected', false); 
     $(currentGroup).children(':not(:selected)').attr('selected', true); 
     storeState.apply(select, args); 
    } 
}; 

यह पहले से चयनित समूह और select तत्व पर विकल्पों भंडारण और निर्धारण जो optgroup चयन किया जाना चाहिए (अथवा अचयनित) द्वारा काम करता है:

यहाँ एक उदाहरण आप के साथ खेल सकते हैं।

कुछ व्यवहार डेवलपर्स की ज़रूरतों के आधार पर बदला जा सकता है। कई options का चयन के मामले में उदाहरण के लिए जो एक से अधिक optgroups अवधि (क्लिक करके और नीचे खींच कर के रूप में स्क्रीनशॉट में देखा):

इस मामले के लिए डिफ़ॉल्ट संघर्ष समाधान हमेशा पिछले optgroup उपयोग करने के लिए है, लेकिन पहले से ही चयनित विकल्पों की सबसे बड़ी संख्या के साथ हमेशा पहले, या optgroup का उपयोग करने के लिए बदला जा सकता है।

Answer 5

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


$(document).ready(function() { 
    $('select').click(function(tar) { 
     var justClickValue = tar.target.value; 

     var selectedGroup = $('option[value="'+justClickValue+'"]').parent(); 

     if (selectedGroup.hasClass("allSelected")) { 
      selectedGroup.removeClass("allSelected"); 
      $("option").each(function() { 
       $(this).removeAttr("selected"); 
      }); 
     } else { 
      $(".allSelected").removeClass("allSelected"); 
      selectedGroup.addClass("allSelected"); 
      $(".allSelected option").each(function() { 
       $(this).attr("selected", "selected"); 
      }); 
     } 
    }); 
}); 

Answer 6

नहीं विकल्प का चयन करें पार ब्राउज़र मुद्दों की विशिष्ट प्रश्न का उत्तर, मुझे लगता है कि पहले से ही उत्तर दिया गया है, लेकिन डेटा का चयन और सर्वर के लिए इसे वापस में उत्तीर्ण होने की समस्या का समाधान बदलने के लिए होगा अपने जो कुछ बेहतर सूट बहु चयन करने के लिए मार्क अप

यदि आप चेक बॉक्स का उपयोग करें, तो आप उन्हें एक सूची में डाल दिया और सभी का चयन करने js enhanching जोड़ें और अचयनित कर सकते हैं सभी

http://jsfiddle.net/Ndkct/43/

<dl> 
<dt>Queen</dt> 
<dd> 
    <ul> 
     <li> 
      <input id="Mercury" name="bandmembers" value="Mercury" type="checkbox" /> 
      <label for="Mercury">Freddie</label> 
     </li>  
     <li> 
      <input id="May" name="bandmembers" value="May" type="checkbox" /> 
      <label for="May">Brian</label> 
     </li>  
     <li> 
      <input id="Taylor" name="bandmembers" value="Taylor" type="checkbox" /> 
      <label for="Taylor">Roger</label> 
     </li>  
     <li> 
      <input id="Deacon" name="bandmembers" value="Deacon" type="checkbox" /> 
      <label for="Deacon">John</label> 
     </li>  
    </ul> 
</dd> 
<dt>Pink Floyd</dt> ... 

js अब काफी सरल

$("dt") 
    .css("cursor","pointer") 
    .click(function(){ 
     var $el = $(this).next(); 
     var $checks = $el.find(":checkbox"); 
     if($checks.is(":not(:checked)")){ 
      $checks.attr("checked",true); 
     }else{ 
      $checks.attr("checked",false); 
     } 
    });