मुझे चयन 2

Question

में "नया आइटम जोड़ें" विकल्प जोड़ने की आवश्यकता है, मैं सूची के पहले तत्व में "नया आइटम जोड़ें" में एक बटन जोड़ना चाहता हूं। यदि उपयोगकर्ता उस बटन पर क्लिक करता है तो मुझे पॉप-अप खोलने और उपयोगकर्ताओं से इनपुट प्राप्त करने की आवश्यकता होती है। चयन 2 प्लगइन में यह कैसे करें? क्या इस (या) को अनुकूलित करने की आवश्यकता के लिए कोई डिफ़ॉल्ट विकल्प है?

Answer 1

आप इस तरह से

$('button').click(function(){ 
    var value = prompt("Please enter the new value"); 
    $(".mySelect") 
    .append($("<option></option>") 
    .attr("value", value) 
    .text(value)); 

}) 

Answer 2

मूल रूप से क्या KLD सुझाव Select2 को एक नया विकल्प जोड़ सकते हैं, लेकिन अतिरिक्त बटन के बिना के रूप में मैं समझता हूँ ओपी select के पहले विकल्प का उपयोग करने के लिए नए मूल्य मोडल को गति प्रदान करना चाहता है। यह चयन 2 के मान को जांचता है: बंद ईवेंट ट्रिगर होता है और यदि "NEW" चुना जाता है, तो नए मान के लिए संकेत मिलता है, select बॉक्स के अंत में जोड़ता है और इसे चुनता है।

नोट: मैं इनपुट में विकलांग खोज और कहा प्लेसहोल्डर

$(function() { 
 
    $(".select2") 
 
    .select2({ 
 
    placeholder: 'Select type', 
 
    width: '50%', 
 
    minimumResultsForSearch: Infinity 
 
    }) 
 
    .on('select2:close', function() { 
 
    var el = $(this); 
 
    if(el.val()==="NEW") { 
 
     var newval = prompt("Enter new value: "); 
 
     if(newval !== null) { 
 
     el.append('<option>'+newval+'</option>') 
 
      .val(newval); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<select id="mySel" class="select2"> 
 
    <option></option> 
 
    <option value="NEW">Add new type</option> 
 
    <option>Car</option> 
 
    <option>BUS</option> 
 
    <option>TWO</option> 
 
    <option>THREE</option> 
 
</select>

Answer 3

हो सकता है आप tags विकल्पों का उपयोग करना चाहिए है?

https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term

Answer 4

jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){ 
         jQuery("#yourelementid"_add").remove(); 
         jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){ 
          jQuery("#"+yourelementid+"_add").off().on('click',function(){ 
          // yourfunctionfordisplayingdiv 
          }); 
         }); 
        }); 

आप उल सूची के बाद html सामग्री जोड़ सकते हैं - Select2 - "+ yourelementid +" - परिणाम है, और जो कुछ भी आप कर सकते हैं इसके साथ करते हैं। बस का चयन करें बॉक्स के वैल के रूप में परिणाम सेट

check the image out

Answer 5

यहाँ पिछले कुछ समय से इस विषय पर चारों ओर से खुदाई करने के बाद मेरी दृष्टिकोण

$('#select2') 
    .select2() 
    .on('select2:open',() => { 
     $(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;">Create new item</a>'); 
}) 

Answer 6

है ... मैं लगता है मुझे इस समस्या का समाधान है।

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

तो .... कुछ लगभग नगण्य के बाद - मैं निम्नलिखित कोड के साथ आया था:

पहले: डोम में सभी का चयन करने के लिए एक वैश्विक बाध्यकारी बनाएँ। यह केवल वर्तमान उपयोगकर्ता के साथ काम करने के लिए एक अस्थायी संदर्भ स्थापित करने के लिए है - एक वैश्विक चर बनाने के बाद जिसे बाद में उपयोग किया जा सकता है।

 $('select').select2().on('select2:open', function() { 
         // set a global reference for the current selected Select 
         console.log('found this ---> '+$(this).attr('id')); 
         if (typeof tempSelectedObj === 'undefined') { 
          tempSelectedObj = null; 
         } 
         tempSelectedObj = this; 
        }); 

दूसरा: एक दस्तावेज 'KeyUp' घटना है कि Select2 अस्थायी इनपुट और Select2-search__field वर्ग के लिए मैप किया गया है बनाएँ। यह चयन 2 इनपुट के लिए सभी महत्वपूर्ण घटनाओं को कैप्चर करेगा। लेकिन इस मामले में, मैंने जादू में प्रवेश करने के लिए एक keyCode === 13 (वापसी चरित्र) जोड़ा है।

$(document).on('keyup','input.select2-search__field',function (e) { 
        // capture the return event 
        if (e.keyCode === 13) { 

         var newValue = $(this).val(); 
         console.log('processing this: '+newValue); 

         // create new option element 
         var newOpt = $('<option>') 
          .val(newValue) 
          .text(newValue); 

         // append to the current Select 
         $(tempSelectedObj) 
          .append(newOpt); 

         // apply the change and set it 
         $(tempSelectedObj) 
          .val(newValue) 
          .select2('close'); 
        } 
       }) 

जब कोई रिटर्न कैरेक्टर पता चला है, तो निम्न होता है।

• कब्जा वर्तमान मूल्य
• एक नया डोम ऑप्शन तत्व (jQuery)
• मूल्य और नए विकल्प का पाठ सेट तत्व
• tempSelectedObj चर करने के लिए नए विकल्प तत्व संलग्न बनाने (jQuery)
• ट्रिगर Select2 बंद करने के लिए
• नया मान को Select2 का मान सेट संलग्न
• ट्रिगर di करने के लिए अंतिम Select2 परिवर्तन नया विकल्प
• चलाएं!

जाहिर है इस उदाहरण के लिए कोड के दो खंडों की आवश्यकता है, लेकिन मुझे लगता है कि यह एक समस्या के लिए एक बहुत ही हल्का दृष्टिकोण है जो बहुत से लोग संघर्ष कर रहे हैं। और यह सामान्य है कि इसे आसानी से अन्य उद्देश्यों के लिए बनाया जा सकता है।

आशा है कि इससे मदद मिलती है! मैंने कुछ समय से इसके साथ संघर्ष किया है।

https://jsfiddle.net/h690bkmg/1/

Answer 7

$('#my-select2').select2().on('select2:open', function() { 
      var a = $(this).data('select2'); 
      if (!$('.select2-link').length) { 
       a.$results.parents('.select2-results') 
         .append('<div class="select2-link"><a>New item</a></div>') 
         .on('click', function (b) { 
          a.trigger('close'); 

          // add your code 
         }); 
     } 
    });