Select2 मान रीसेट करें और प्लेसहोल्डर दिखाएं

Question

मैं प्लेसहोल्डर का चयन 2 द्वारा मूल्य रीसेट पर कैसे करता हूं। मेरे उदाहरण में, यदि स्थान या ग्रेड चयनित बॉक्स क्लिक किए गए हैं और मेरे चयन 2 का मान है, तो चयन 2 के मान को डिफ़ॉल्ट धारक को रीसेट और दिखाना चाहिए। यह स्क्रिप्ट मान रीसेट कर रहा है, लेकिन प्लेसहोल्डर नहीं दिखाएगा

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

Answer 1

आपको चयन 2 को इस प्रकार परिभाषित करना होगा

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

Select2 को रीसेट करने के लिए

$("#customers_select").select2("val", "");

Comments

मैंने एक <select multiple> के साथ यह कोशिश की, लेकिन मुझे यह त्रुटि मिली: <select> तत्व से संलग्न होने पर Select2 के लिए विकल्प 'initSelection' की अनुमति नहीं है।

— सोरिन पोस्टेलनिकु

यह मेरे लिए काम नहीं करता है। प्लेसहोल्डर अभी भी नहीं दिखा है।

— bcr

नीचे देखें @ लेगो स्टॉर्मट्रोप्र का उत्तर, जो Select2 के एपीआई के अनुसार नई विधि को दर्शाता है। उपरोक्त विधि पदावनत है।

— डेविड

V4.0.3 के अनुसार, यह .select2("val", "")काम की तरह प्रतीत नहीं होता है ।

— adamj

$("#customers_select").val('').trigger('change') ;मैंने इसका इस्तेमाल किया और यह काम कर गया।

— अक्षय कुलकर्णी

Answer 2

Select2 ने अपना API बदल दिया है:

Select2: select2("val")विधि को हटा दिया गया है और बाद के Select2 संस्करणों में हटा दिया जाएगा। इसके बजाय $ element.val () का उपयोग करें।

अब यह करने का सबसे अच्छा तरीका है:

$('#your_select_input').val('');

संपादित करें: दिसंबर 2016 की टिप्पणियां बताती हैं कि नीचे ऐसा करने का अद्यतन तरीका है:

$('#your_select_input').val([]);

Comments

यह मान को अपडेट करता है, लेकिन इसे सही तरीके से दिखाने के लिए, आपको एक परिवर्तन घटना को ट्रिगर करना होगा। $('#your_select_input').val('').trigger('change')

— सैनिम

यह मेरे लिए काम नहीं करता है। प्लेसहोल्डर अभी भी नहीं दिखा है।

— bcr

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

— डेव न्यूटन

यह सही ढंग से काम नहीं करता है, select2 4.0.2 का उपयोग करके। यह चयन को रीसेट करेगा और प्लेसहोल्डर को पुनर्स्थापित करेगा, लेकिन जब मैं एक नया मान (पोस्ट रीसेट) चुनता हूं, तो मुझे चयनित "खाली स्ट्रिंग" विकल्प (यानी, केवल "एक्स" वाला एक बॉक्स) दिखाई देता है।

— कोउनपिस

$ ('# your_select_input')। Val ('')। ट्रिगर ('परिवर्तन') केवल तब काम करता है जब प्लेसहोल्डर प्रदान किया जाता है। अन्यथा रिक्त स्ट्रिंग विकल्प को चयनित विकल्प के रूप में प्रदर्शित किया जाएगा।

— अमोल

Answer 3

स्वीकृत उत्तर मेरे मामले में काम नहीं करता है। मैं यह कोशिश कर रहा हूँ, और यह काम कर रहा है:

चयन 2 को परिभाषित करें:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

या

$("#customers_select").select2({
    placeholder: "Select a State"
});

दुबारा सेट करने के लिए:

$("#customers_select").val('').trigger('change')

या

$("#customers_select").empty().trigger('change')

Comments

मैंने पाया कि जब तक आप प्लेसहोल्डर को परिभाषित करते हैं, तब तक अनुमति नहीं देता है कि क्लीयर काम नहीं करता है

— Dan Tappin

फ़ायरफ़ॉक्स$('#your_select_input').val('').trigger('change')$('#your_select_input').val('');

— एलेक्स आर्ट

यह मेरे लिए काम करता है, यह मुझे v4.0.3 का उपयोग कर रहा है select2 से सभी डेटा को हटाता है

— ClearBoth

$ ("# customers_select")। खाली ()। ट्रिगर ('परिवर्तन') मेरे लिए काम करता है। :)

— मुन्ना खान '’

'$ ("# customers_select")। खाली ()। ट्रिगर (' परिवर्तन ')' मेरे लिए काम किया, धन्यवाद!

— ताहिरहान

Answer 4

केवल एक चीज मेरे लिए काम कर सकती है:

$('select2element').val(null).trigger("change")

मैं संस्करण 4.0.3 का उपयोग कर रहा हूं

संदर्भ

Select2 प्रलेखन के अनुसार

Comments

मैं v4.0.3 का भी उपयोग कर रहा हूं और $('select2element').val("").trigger("change")ठीक काम भी कर रहा हूं ।

— रूबी

कृपया ध्यान दें कि आपके पास <<> के अंदर एक खाली <विकल्प> भी होना चाहिए। यदि आप चयन 2 के साथ ajax का उपयोग कर रहे हैं, तो यह मदद करेगा - $ ('# selectFieldId')। Prepend ('<विकल्प चयनित = "चयनित"> </ विकल्प>')

— musicjerm

Answer 5

Select2 संस्करण 4.0.9 के साथ यह मेरे लिए काम करता है:

$( "#myselect2" ).val('').trigger('change');

Comments

इससे मेरा चयन 2 ड्रॉपडाउन खाली हो गया। मेरे लिए काम किया। धन्यवाद।

— दिशा

Answer 6

Select2 एक विशिष्ट CSS क्लास का उपयोग करता है, इसलिए इसे रीसेट करने का एक आसान तरीका है:

$('.select2-container').select2('val', '');

और आपको यह फायदा होगा कि अगर आपके पास एक ही फॉर्म में कई सेलेक्ट 2 हैं, तो वे सभी इस सिंगल कमांड के साथ रीसेट हो जाएंगे।

Answer 7

इसे इस्तेमाल करो :

$('.select').val([]).trigger('change');

Comments

मेरे लिए, $ ('चयन 2') के साथ काम किया। वैल ([])। ट्रिगर ('परिवर्तन');

— मार्सेलो अगिमोवेल

Answer 8

चयनित मूल्य प्राप्त करने के लिए

$('#employee_id').select2('val','');

---

स्पष्ट विकल्प वाल्वों के लिए

$('#employee_id').html('');

Comments

fefe प्लेसहोल्डर टेक्स्ट को फिर से सेट करने के लिए कह रहा है। अतः इस उत्तर का केवल पहला भाग ही मान्य है।

— nterms

हाँ, इसीलिए मैं उत्तर शीर्षक पर प्रकाश डालता हूँ।

— शंका एसएमएस

पहला जवाब वास्तव में यह> 4.0 से अब लागू नहीं हो रहा है। लेकिन दूसरे विकल्प ने मुझे बचा लिया! यह समाधान है जब आप वास्तव में select2 को खाली करना चाहते हैं। 2 का चयन करने के लिए .val ('') को सेट करना पर्याप्त नहीं है। Html को साफ़ करने के लिए भी आपको चाहिए। बहुत बहुत धन्यवाद!!!

— वज़्जा

Answer 9

मुझे पता है कि यह एक पुराना सवाल है, लेकिन यह select2 संस्करण 4.0 के लिए काम करता है

 $('#select2-element').val('').trigger('change');

या

$('#select2-element').val('').trigger('change.select2'); 

यदि आपके पास इससे जुड़ी हुई घटनाएँ हैं

Comments

उत्कृष्ट समाधान। मुझे नए जोड़े गए चयन 2 बॉक्स को लक्षित करने के लिए .last () फ़ंक्शन जोड़ना पड़ा। $('#select2-element').last().val('').trigger('change.select2');

— InsParbo

Answer 10

Select2 को कॉन्फ़िगर करने के लिए निम्नलिखित का उपयोग करें

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

और प्रोग्रामेटिक रूप से इनपुट का चयन करने के लिए

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

Answer 11

यह सही तरीका है:

 $("#customers_select").val('').trigger('change');

मैं Select2 की नवीनतम रिलीज का उपयोग कर रहा हूं।

Answer 12

सबसे पहले आपको इस तरह से select2 को परिभाषित करना होगा:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Select2 को रीसेट करने के लिए, आप निम्नलिखित कोड ब्लॉक का उपयोग कर सकते हैं:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

Answer 13

आप द्वारा ते चयन साफ़ कर सकते हैं

$('#object').empty();

लेकिन यह आपको अपने प्लेसहोल्डर में वापस नहीं लाएगा।

तो इसका आधा समाधान है

Answer 14

मैंने उपरोक्त समाधानों की कोशिश की, लेकिन यह मेरे लिए काम नहीं किया।

यह एक तरह की हैक है, जहां आपको परिवर्तन को ट्रिगर करने की आवश्यकता नहीं है।

$("select").select2('destroy').val("").select2();

या

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

Answer 15

दूरस्थ डेटा लोड करने वाले उपयोगकर्ताओं के लिए, यह ajax को बंद किए बिना चयनकर्ता को प्लेसहोल्डर पर रीसेट कर देगा। V4.0.3 के साथ काम करता है:

$("#lstProducts").val("").trigger("change.select2");

Comments

मेरे लिए काम किया लेकिन मेरा ट्रिगर सिर्फ 'परिवर्तन' था

— ग्रेगरी आर। सुदरथ

यह एकमात्र समाधान था जिसने मेरे लिए अजाक्स डेटा का उपयोग करके एक अन्य Select2 से एक Select2 को रीसेट करने के लिए काम किया।

— इल्युडियमप्यू ३६

Answer 16

तो, फॉर्म को रीसेट करने के लिए आप में से कुछ में एक रीसेट बटन होगा। स्क्रिप्ट टैग के अंदर निम्नलिखित कोड जोड़ें

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

या किसी प्लेसहोल्डर को रखे बिना सिलेक्ट फील्ड खाली करने के लिए:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

Answer 17

स्थान धारक के लिए

$("#stateID").select2({
    placeholder: "Select a State"
});

एक चयन 2 रीसेट करने के लिए

$('#stateID').val('');
$('#stateID').trigger('change');

उम्मीद है की यह मदद करेगा

Answer 18

के बाद सिफारिश की यह ऐसा करने का तरीका है। दस्तावेज़ीकरण में पाया गया https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (यह एक काफी सामान्य मुद्दा लगता है):

जब ऐसा होता है तो इसका आमतौर पर मतलब होता है कि आपके पास <option></option>पहले विकल्प के रूप में कोई रिक्त नहीं है <select>।

जैसे की:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

Answer 19

मुझे भी यह समस्या हो रही थी और यह प्लेसहोल्डर के रीसेट होने से पहले val(null).trigger("change");एक No select2/compat/inputDataत्रुटि को फेंकने से उपजा था । मैंने इसे त्रुटि को पकड़कर और सीधे प्लेसहोल्डर (एक चौड़ाई के साथ) सेट करके हल किया। नोट: यदि आपके पास एक से अधिक है तो आपको प्रत्येक को पकड़ने की आवश्यकता होगी।

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

मैं Select2 4.0.3 चला रहा हूं

Comments

ऐसा लगता है कि आपके पास एक श्रोता changeघटना के लिए बाध्य है । ट्रिगर करने का प्रयास करें change.select2- जो बाध्य श्रोताओं को ट्रिगर नहीं करेगा (देखें github.com/select2/select2/issues/3620 )।

— पॉल

Answer 20

v.4.0.x के रूप में ...

मूल्यों स्पष्ट करने के लिए, लेकिन यह भी प्लेसहोल्डर उपयोग बहाल ...

.html('<option></option>');  // defaults to placeholder

यदि यह खाली है, तो इसके बजाय यह पहला विकल्प आइटम का चयन करेगा जो आप नहीं चाहते हैं

.html(''); // defaults to whatever item is first

स्पष्ट रूप से ... Select2 बट में ऐसा दर्द है, यह मुझे आश्चर्यचकित करता है कि इसे प्रतिस्थापित नहीं किया गया है।

Answer 21

मैं ऊपर के समाधान की कोशिश की है, लेकिन संस्करण 4x के साथ काम नहीं किया।

मैं क्या हासिल करना चाहता हूं: सभी विकल्प स्पष्ट करें लेकिन प्लेसहोल्डर को स्पर्श न करें। यह कोड मेरे लिए काम करता है।

selector.find('option:not(:first)').remove().trigger('change');

Comments

यदि आप selector.find ('विकल्प: नहीं (पहले)') का उपयोग करते हैं। html ('')); यह काम करना चाहिए।

— वज़्जा

Answer 22

Select2 संस्करण 3.2 का उपयोग करते हुए इसने मेरे लिए काम किया:

$('#select2').select2("data", "");

लागू करने की जरूरत नहीं थी initSelection

Comments

यह मेरे लिए अब तक का सबसे सरल तरीका था। दूसरे तरीके मेरे काम नहीं आए।

— chevybow

Answer 23

यहां पहले 10 समाधानों की कोशिश करने और असफल होने के बाद, मुझे यह समाधान काम करने के लिए मिला (देखें "nilov ने 7 अप्रैल को टिप्पणी की • संपादित करें" पृष्ठ के नीचे टिप्पणी करें):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

तब परिवर्तन किया जाता है:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(लेखक ने मूल रूप से दिखाया var $select = $(this[1]);, जो एक टिप्पणीकार ने सही किया var $select = $(this[0]);, जो मैं ऊपर दिखाता हूं।)

Answer 24

इस कोड का उपयोग अपनी js फ़ाइल में करें

$('#id').val('1');
$('#id').trigger('change');

Answer 25

इससे पहले कि आप इस का उपयोग कर मूल्य को साफ़ करें $("#customers_select").select2("val", ""); करें, रीसेट क्लिक पर किसी अन्य नियंत्रण पर ध्यान केंद्रित करने का प्रयास करें।

यह प्लेसहोल्डर को फिर से दिखाएगा।

Answer 26

DOM इंटरफ़ेस, पहले से ही प्रारंभिक स्थिति का ट्रैक रखता है ...

इसलिए निम्नलिखित करना पर्याप्त है:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

Answer 27

खैर जब भी मैंने किया

$('myselectdropdown').select2('val', '').trigger('change');

मुझे तीन-चार ट्रिगर के बाद किसी तरह की शिथिलता मिलने लगी। मुझे लगता है कि एक स्मृति रिसाव है। यह मेरे कोड के भीतर नहीं है क्योंकि अगर मैं इस लाइन को हटाता हूं, तो मेरा ऐप फ्री है।

चूँकि मेरे पास क्लीयर विकल्प को सही करने के लिए सेट है, मैं साथ गया

$('.select2-selection__clear').trigger('mousedown');

इसके बाद $ ('myselectdropdown') का चयन किया जा सकता है। select2 ('करीब'); यदि आप खुले सुझाव ड्रॉप डाउन को बंद करना चाहते हैं, तो select2 डोम तत्व पर ईवेंट ट्रिगर।

Answer 28

एक [बहुत] इसे करने के लिए हैक करने का तरीका (मैंने इसे संस्करण 4.0.3 के लिए काम करते देखा):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

• allowClear को सही पर सेट किया जाना चाहिए
• एक खाली विकल्प का चयन तत्व में मौजूद होना चाहिए

Answer 29

मेरा समाधान है:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

Answer 30

$('myselectdropdown').select2('val', '0')

जहां 0 ड्रॉपडाउन का आपका पहला मूल्य है