Chosen: ऑप्टग्रुप लेबल को क्लिक करने योग्य बनाएं

यह उपयोगी होगा, लेकिन स्टैंडआर्ट html-select इसकी अनुमति नहीं देता है।

@ Fr3nzy : हाँ, लेकिन अगर यह वैकल्पिक होता, तो यह कोई समस्या नहीं होती, है ना?

@ Fr3nzzy : यदि मैं कर सकता हूं, मानक एचटीएमएल-चयन या तो खोज करने की अनुमति नहीं देता है ... फिर भी यह बहुत सुविधाजनक है, और यही कारण है कि चुना बहुत अच्छा है - यह मानक चयन में सुधार करता है। मुझे लगता है कि हम यहां भी यही तर्क लागू कर सकते हैं।

@ greg0ire : +1, मैं इसे भी ढूंढ रहा हूं: ओ)

@ pilap82 हालांकि, किसी आइटम का नाम लिखकर उसे खोजने में सहायता का चयन करें।

काफी उचित :)

शायद पैच के लिए सबसे अच्छी जगह नहीं है, लेकिन मुझे आशा है कि यह मदद कर सकता है:

$( '.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' } );

यह एक महान विचार है। यदि कोर टीम इसे मर्ज करने के लिए तैयार है तो मैं एक पुल अनुरोध सबमिट करने को तैयार हूं। आपको क्या लगता है @pfiller?

चयनित के साथ बैच चयन का नमूना:

http://vafada.github.com/chosen-dojo/

बहुत बढ़िया!

मैं यह देखना चाहता हूं कि इसे चुना में जोड़ा जाए, लेकिन घटना सुनने को कम गहन तरीके से जोड़ा जाना चाहिए। @adriengibrat का समाधान प्रत्येक समूह के लिए एक श्रोता को लागू करता है जो सैकड़ों समूह होने पर भी अच्छा प्रदर्शन नहीं करता है। हमारे पास पहले से ही खोज परिणाम div पर एक क्लिक ईवेंट है जिसे विकल्प समूहों के विरुद्ध परीक्षण किया जा सकता है। यदि विकल्प सेट है, तो पृष्ठभूमि का रंग बदलने के लिए css का उपयोग किया जाना चाहिए।

+1। मैं सोच रहा था कि जब ऑप्टग्रुप का चयन किया जाएगा, तो यह (वैकल्पिक रूप से) अपने सभी बच्चों को अक्षम/छुपाएगा।

इस सुविधा के लिए +1

@pfiller इस पर या search_improvements शाखा पर कोई अपडेट? इसे मास्टर में विलीन होते देखना पसंद करेंगे।

मुझे चुनिंदा समूहों की भी आवश्यकता है। मैंने मूल रूप से कोड को बदलने की कोशिश की - फिर "ऑप्टग्रुप को छोड़ें और उप-आइटमों को इंडेंट करने के लिए रिक्त स्थान जोड़ें" के बार-बार दिए गए उत्तर से प्रेरित था। यह भयानक लग रहा था, लेकिन चूंकि चुना गया सीएसएस द्वारा अच्छी तरह से स्टाइल किया गया है ... गैर-ऑप्टग्रुप का चयन करने और समूहबद्ध प्रदर्शन की तरह दिखने के लिए प्रत्येक विकल्प पर एक वर्ग का उपयोग करने के बारे में कैसे?

आप इस पहेली में एक मूल संस्करण देख सकते हैं: http://jsfiddle.net/slothbear/9xqpF/

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

मैं अपने प्रोजेक्ट पर इस तकनीक के साथ आगे बढ़ने के करीब हूं, लेकिन मैं फीडबैक की तलाश में हूं। यह काम करने लगता है। क्या आप बेहतर तरीके से सोच सकते हैं? या कोई गोचा?

_बस एहसास हुआ कि मुझे शायद उल्लेख करना चाहिए - विकल्प जोड़ने को सक्षम करने के लिए, बेला चुना के कोएनपंट कांटा का उपयोग कर रहा है। लेकिन मुझे नहीं लगता कि यह इस उदाहरण को प्रभावित करता है।

_मैं भी मार्गदर्शन की तलाश में हूं। मुझे पता है कि select सुविधाओं के करीब रहने के लिए यह तकनीक शायद चुने हुए दर्शन से काफी दूर है - लेकिन अगर इस सुविधा के लिए कोई विकल्प उपयुक्त है, तो मुझे काम करने में खुशी होगी।_

इस सुविधा के लिए +1, मैंने इसका समर्थन करने के तरीके की तलाश करते हुए चुना पाया

(मैं एक समूह शीर्षक का चयन करने या समूह आइटम का चयन करने में सक्षम होने के लिए देख रहा था) स्लॉथबियर के ऊपर के अनुसार

संपादित करें: अंत में मैंने इसे निम्नलिखित करते हुए अनुकरण किया।
कक्षाओं पर ध्यान दें, मैंने सीएसएस में .क्लिक करने योग्य भी जोड़ा है जो कर्सर को पॉइंटर पर सेट करता है।

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

यहाँ मेरा समाधान है। हालाँकि, यह मेरी ज़रूरतों के लिए विशिष्ट है, कोई भी इसके साथ आसानी से बदलाव कर सकता है और इसे अपनी ज़रूरतों के अनुसार बदल सकता है।

उदाहरण:
कारों
-कार1
-कार2
-कार3
विमान
-प्लेन1
-प्लेन2

मैंने जो किया वह सभी समूहों की शुरुआत में एक नया विकल्प बनाने के लिए है, इस तरह, 'सभी' विकल्प समूहों के ठीक बाद आएंगे:
कारों
-सभी कारें
-कार1
-कार2
-कार3
लोग
-सभी लोग
-व्यक्ति1
-व्यक्ति 2

'results_option_build' में, 'सभी' विकल्प को 'result_add_group' पर दूसरे पैरामीटर के रूप में पास करें जब डेटा एक समूह हो, और अगले पुनरावृत्ति में 'ऑल' विकल्प को छोड़ दें:

अगर (डेटा समूह) {
सामग्री += this.result_add_group(डेटा, _ref[++_i])

अब, 'result_add_group' पर चलते हैं और समूह को हमारे द्वारा पारित विकल्प से प्रतिस्थापित करते हैं, लेकिन समूह की शैली को बनाए रखें:
result_add_group = फ़ंक्शन (समूह, विकल्प) {
.
.
वापसी "

बस.. अगर आप चाहें, तो कर्सर को css में पॉइंटर में बदल दें।

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

पुस्तकालय में एक विकल्प के रूप में एकीकृत होना बहुत दिलचस्प होगा, क्योंकि इससे बहु-चयन के प्रबंधन में सुविधा होगी। क्या आपने किसी संस्करण में निचोड़ने का उल्लेख किया है? अभिनंदन

मैंने इसे सिर्फ जावास्क्रिप्ट का उपयोग करके लागू किया है, यह एक अस्थायी फिक्स है। मैं इसे कई चयनों के लिए उपयोग नहीं करता, हालांकि मैं इसे कस्टम ग्रुपिंग के लिए उपयोग करता हूं। मैंने समूहों को विकल्प बना दिया, लेकिन समूहों की तरह दिखते हैं, और 'समूह' कीवर्ड दिए हैं कि जब आप उप-विकल्प की खोज करते हैं, तो समूह ऐसा दिखाएगा जैसे यह सामान्य रूप से चुने गए.जेएस http://stackoverflow में होगा। कॉम/क्यू/22336052/744228

मैंने इसे अपनी चुनी हुई स्थानीय प्रति में जोड़ा क्योंकि यह मेरी परियोजना के लिए एक आवश्यकता थी। अंत में यह काफी आसान था।

set_default_values फ़ंक्शन में मैंने अंत में this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; ।

फिर result_add_group मैंने समूह को असाइन की गई कक्षाओं को बदल कर be . कर दिया

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

और अंतिम लेकिन कम से कम result_select में थोड़ा सा हैक और जोड़ा गया

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

से ठीक पहले
item = this.results_data[high[0].getAttribute("data-option-array-index")];

https://gist.github.com/ruhley/9944574 पर पूरा कोड देखें

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

पार्टी के लिए थोड़ी देर हो चुकी है, लेकिन: इस सुविधा के लिए +1!

आपके समाधान के लिए @ruhley +1, एक आकर्षण की तरह काम करता है!
बस एक छोटा सा विवरण जो पूर्ण कोड पृष्ठ में है लेकिन कोड खंड में नहीं है: वहाँ एक है
अन्यथा{
अंत में लापता।

नमस्ते,
आपके कोड के लिए @ruhley धन्यवाद।
लेकिन आपके संशोधनों के साथ, क्लिक करने के बाद समूह अक्षम नहीं होता है और इसे फिर से चुना जा सकता है।

यहाँ मेरे सुधार हैं (चुने गए 1.4.2 के आधार पर):

• पंक्ति 158 के बाद, "set_default_values" फ़ंक्शन में, जोड़ें:

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_पैरामीटर का जोड़_

• "results_option_build" फ़ंक्शन में लाइन 222 बदलें, इसके साथ:

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_बच्चों को "result_add_group" फंक्शन में दें।

• लाइन 272 बदलें, "result_add_group" फ़ंक्शन की पुनर्परिभाषा, इसके साथ:

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_बच्चों को प्राप्त करने के लिए_

• लाइन 285 ( group_el = document.createElement("li"); ) के बाद, "result_add_group" फ़ंक्शन में, जोड़ें:

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_यह समूह को क्लिक करने योग्य बनाता है यदि कम से कम एक बच्चे का चयन नहीं किया जाता है। (यह हिस्सा "सभी" चर के कारण सुधार योग्य है)।_

• लाइन 1052 ( high.addClass("result-selected"); ) के बाद, "result_select" फ़ंक्शन में, जोड़ें:

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_यह केवल अचयनित बच्चों को जोड़ता है।_

• लाइन 1083 के बाद, "result_select" फ़ंक्शन में:

}

_क्लिक किए गए समूह की स्थिति को बंद करने की आवश्यकता है।_

कोड के उस टुकड़े को सही ढंग से इंडेंट करना न भूलें;)

यहाँ मेरी फ़ाइल का पूर्ण संस्करण है: https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
यहाँ एक अंतर है (1 वर्ष उपलब्ध): https://www.diffnow.com/?report=8zhe9
मज़े करो

क्या यह अभी भी लागू नहीं हुआ है?

@GuillaumeSTEIN मैंने आपकी पूर्ण संस्करण स्क्रिप्ट की कोशिश की, कुछ भी नहीं बदला।
क्या मुझे इसे काम करने के लिए एचटीएमएल में कुछ विशेष पैरामीटर या कक्षाएं जोड़ने की ज़रूरत है?
हो सकता है कि आप http://codepen.io/ या jsfiddle पर एक कामकाजी उदाहरण बना सकें?

हां, आपको विकल्प सेट करने की आवश्यकता है: group_selectable to true इस सुविधा को सक्रिय करने के लिए

धन्यवाद @GuillaumeSTEIN , यह काम कर गया, लेकिन मुझे @adriengibrat स्क्रिप्ट से जो याद आती है, वह वर्तमान समूह के तहत सभी विकल्पों को उजागर कर रहा है।

चयनित समूहों में "परिणाम-चयनित" वर्ग होता है।
आप कुछ सीएसएस कर सकते हैं। यहाँ मैंने जो लिखा है, आपको इसे अपनी आवश्यकताओं के लिए अनुकूलित करने की आवश्यकता हो सकती है:

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

मैंने उस पर वार किया #2678

यह इतनी उपयोगी सुविधा होगी! मुझे इसे लागू होते देखना अच्छा लगेगा!

इस सुविधा के लिए +1।

अगर किसी को यह उपयोगी लगता है, तो मैं @slothbear jsfiddle को

• "सभी साफ़ करें" बटन
• रूट श्रेणी आइटम का चयन करना बच्चों को अक्षम और अचयनित करता है। क्यों ? मेरे मामले में, मैं एक पदानुक्रम फ़िल्टर उत्पन्न करने के लिए चुना का उपयोग करूंगा, जहां एक पिता नोड का चयन करना प्रत्येक बच्चों की श्रेणी पर खोज करेगा, और हम प्रत्येक बच्चों को चयनित के रूप में यूआई को प्रदूषित करने की इच्छा नहीं रखते हैं।

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

एकाधिक चयन (संस्करण 1.7.0 में जोड़ा गया) पर परिणाम चुनने के बाद परिणाम खुले रहने के लिए मैंने अभी चुने गए 1.8.3 में अपग्रेड किया है। महान विशेषता, खुशी है कि इसे जोड़ा गया। हालांकि, मैं 1.6.1 का उपयोग कर रहा था और समूह के नाम पर क्लिक करते समय पूरे समूह को जोड़ने की अनुमति देने के लिए यहां कोड का उपयोग किया था: http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- चुना-jquery-प्लगइन/

वह कोड अब तक बहुत अच्छा काम कर रहा है। 1.8.3 और Hide_results_on_ select:false का उपयोग करने से कुछ टूट जाता है, और यह केवल वर्तमान में हाइलाइट किए गए परिणाम विकल्प का चयन करता है। जब उस लाइन को हटा दिया जाता है (इसे सही के डिफ़ॉल्ट पर वापस सेट करना, चयन पर छुपाएं), यह ठीक काम करता है और पूरे समूह परिणाम विकल्पों का चयन करता है। तो Hide_results_on_ चयन में कुछ

मैं यह देखने के लिए उपरोक्त सभी टिप्पणियों को देखूंगा कि क्या इसे नई सुविधा के दोष के रूप में संबोधित किया गया है, लेकिन मैं यह नहीं बता सकता कि लोग इसका परीक्षण करते समय किस संस्करण का उपयोग कर रहे हैं।

कोई विचार?

ठीक। मैंने बहुत किया। 1.8.3 पर "अपग्रेड करना" पिछले सप्ताह के लिए एक अजीब खेल के अलावा और कुछ नहीं रहा है। सीएसएस मुद्दों, अप्रत्याशित गतिविधि मुद्दों, आदि। मैंने बहु चयन सुविधा (जिसे पहली जगह लागू करने में सालों लगे) पर परिणाम रखने के लिए अपग्रेड किया, लेकिन पता चला कि यह हमेशा परिणामों से चयन करते समय शीर्ष पर वापस कूदता है, तो क्या अच्छा है वह है - वह सब कुछ नहीं की प्रतीक्षा कर रहा है। कई विकल्पों के साथ एकल चयन पर प्रदर्शन किसी तरह क्रॉल में धीमा हो गया है। और यहां सूचीबद्ध करने के लिए और भी कई मुद्दे हैं। इस काम को इतने सालों तक जारी रखते हुए अच्छा काम, मैंने इसका आनंद लिया है। लेकिन सुधार उपयोगकर्ता अनुभव को कम करने की कीमत पर आए और मेरे पास वह नहीं हो सकता। मैं शोध कर रहा हूं कि चुने हुए को कैसे निकाला जाए और चयन 2 का उपयोग कैसे किया जाए। यह 2018 है, एक चुनिंदा टूल खोजने का समय जो उपयोगकर्ता की अपेक्षाओं को पूरा करता है जिसे पूरा करना कठिन होता जा रहा है। क्षमा करें और धन्यवाद

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

नमस्ते,
यदि आप ऑप्टग्रुप का उपयोग करना चाहते हैं और उस पर क्लिक करने और उस समूह के सभी विकल्पों को स्वचालित रूप से जोड़ने में सक्षम हैं, तो बस इसे अपने जावास्क्रिप्ट में जोड़ें: (ईवेंट ट्रिगर ".ग्रुप-परिणाम" अधिक प्रतिबंधात्मक हो सकता है)

मुझे यकीन है कि इसे AbstractChosen वर्ग में जोड़ा जा सकता है, जैसे AbstractChosen.prototype.optgroup_click = function(evt) ....

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

मैंने बूटस्ट्रैप-चयन का उपयोग किया और ऑप्टग्रुप पर क्लिक करने और उसके सभी आइटमों का चयन करने में सक्षम होने के लिए कुछ खोजने के लिए भी संघर्ष कर रहा था - यह लिंक वास्तव में मेरे लिए काम करता है, आशा है कि यह मदद करता है: https://stackoverflow.com/questions/41821115 /चयन-अचयनित-ऑप्टग्रुप-आधारित-पर-विकल्प-चयन-में-चयन-पिकर-बूस्ट्रैप