चयन 2 के बाद एक कार्रवाई ट्रिगर


79

मैं अपनी खोज के लिए select2 पुस्तकालय का उपयोग कर रहा हूं।
क्या खोज परिणाम का चयन करने के बाद कार्रवाई को ट्रिगर करने का कोई तरीका है? उदाहरण के लिए एक पॉपअप, या एक साधारण जेएस अलर्ट खोलें।

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

1
आप 'परिवर्तन' ईवेंट के लिए बाध्य कर सकते हैं, इस लिंक पर "ईवेंट्स" नामक एक खंड है जो आपने सभी अलग-अलग ईवेंट बाइंडिंग के लिए बहुत लंबे कोड स्निपेट के साथ दिया था।
रोस

जवाबों:


170

दस्तावेज़ीकरण ईवेंट अनुभाग देखें

संस्करण के आधार पर, नीचे दिए गए स्निपेट में से एक को आपको अपनी इच्छित घटना देनी चाहिए, वैकल्पिक रूप से बस "चेंज 2-सिलेक्टिंग" को "परिवर्तन" के साथ बदलें।

संस्करण 4.0 +

घटनाएँ अब प्रारूप में हैं: select2:selecting(के बजाय select2-selecting)

अधिसूचना के लिए साँप के लिए धन्यवाद कि यह 4.0 के रूप में बदल गया है

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

संस्करण 4.0 से पहले

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

बस स्पष्ट करने के लिए, दस्तावेज़ को select2-selectingपढ़ता है:

चयन 2-चयन निकाल दिया जब एक विकल्प ड्रॉपडाउन में चयन किया जा रहा है, लेकिन चयन से पहले किसी भी संशोधन किया गया है। इस ईवेंट का उपयोग उपयोगकर्ता को event.preventDefault () कॉल करके चयन को अस्वीकार करने की अनुमति देने के लिए किया जाता है

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

चयन बदलने पर निकाल दिया गया।

तो changeआपकी आवश्यकताओं के लिए अधिक उपयुक्त हो सकता है, इस पर निर्भर करता है कि आप चयन पूरा करना चाहते हैं और फिर अपना ईवेंट करें, या संभावित रूप से परिवर्तन को रोकें।


13
नए संस्करणों में ईवेंट के अन्य नाम हैं (उदाहरण के लिए 'select2: select'), https://select2.github.io/examples.html
snakey

1
घटनाक्रम यहां डॉक्टर में हैं। एफएक्यू शैली के साथ स्पष्ट नहीं है।
पियरे डे LESPINAY

1
वैल्यू सेट होने से पहले "चयन" कॉल किया जाता है। जो आगे बढ़ेगा: "कंसोल.लॉग ($ (यह) .val ())" एक रिक्त मान का उत्पादन
जोसेफ ग्रोट कोर्मेलिंक

जब मैंने अपने कोणीय अनुप्रयोग में समान प्रयास किया, तो यह मुझे गलत मान दे रहा था। मान लीजिए कि चुनिंदा 2 विकल्पों में 4 मान हैं। 1 मिनट, 5 मिनट, 1 घंटा, दैनिक। अब $ ('# yourselect') का उपयोग कर रहे हैं। ("select2-selecting", function (e) {...} यह मुझे पिछले मूल्य दे रहा है कि मैंने क्या चुना है।
यश जैन

इसके बजाय मैंने $ (your # आपका चयन ’) की कोशिश की। (" चयन 2-चयन "), फ़ंक्शन (ई) {...} जो मेरे लिए काम किया
यश जैन

25

Select2 ईवेंट के नामों में कुछ बदलाव किए गए थे (मुझे लगता है कि v। 4 और बाद में) इसलिए '-' को इसमें बदल दिया गया है : ''
अगले उदाहरण देखें:

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

आप 'select2' प्लगइन साइट पर सभी घटनाओं की जाँच कर सकते हैं: Select2 Events


13

इससे मेरा काम बनता है:

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});

मुझे समझ में नहीं आता, लेकिन यह मेरे लिए तब काम आया जब तारेक का जवाब नहीं था। मैं भी एक अलग परियोजना में काम करने के लिए उसका जवाब मिला है, लेकिन किसी कारण के लिए यह एकमात्र ओवरराइड था जो मेरे प्रोजेक्ट को ऊपर और चल रहा था।
tokyo0709

@ tokyo0709 यह काम करता है क्योंकि .changeघटना बाद की select2:selectघटनाओं की तुलना में निष्पादन की श्रृंखला में आती है । मेरे लिए मैं चयन की सीएसएस पर कब्जा करने की कोशिश कर रहा था, select2:selectलेकिन भले ही मैंने इसे इंस्पेक्टर पर देखा था लेकिन मैं इसके माध्यम से कब्जा नहीं कर सका था select2:select- जब मैंने .changeइसे बदल दिया तो काम किया क्योंकि मूल चयन के लिए सीएसएस को अपडेट करने से पहले Select2 आग की select2:selectघटना .. थोड़ा पागल , मेरी राय में।
a20

1
@ a20 कभी-कभी एक आसान समाधान html सीएसएस के माध्यम से डोम तत्वों को स्थापित कर रहा है ताकि आपको जावास्क्रिप्ट इंजन को पकड़ने के लिए इंतजार न करना पड़े। यह कुछ उदाहरणों में अच्छी तरह से काम करता है।
यार्डपेन्टी.कॉम

7

V.4 के ऊपर मेरे उपयोग के अनुसार यह काम करने वाला है

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

और कम के लिए तो v.4 यह काम करने वाला:

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});

यह मेरे लिए काम नहीं है। मैंने ऊपर दिए गए कोड को नीचे दिए गए अनुसार बदल दिया है। e.params.args.data
तुषार सक्सेना

यह मेरे लिए काम नहीं किया, डेटा फ़ील्ड के माध्यम से e.params.data अपरिभाषित के लिए नहीं मिला। करीब से निरीक्षण करने पर, ई के लिए कोई पैरामेड फ़ील्ड सेट नहीं किया गया था। मेरी समस्या के लिए, मुझे सिर्फ मान पढ़ने की ज़रूरत थी इसलिए e.val मेरे लिए पर्याप्त था।
नेमनेशन


0
//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.