मैं JqGrid के साथ select2 ड्रॉपडाउन के चयनित मान को कैसे बदलूं?

Question

मैं ओलेग के चयन 2 डेमो का उपयोग कर रहा हूं , लेकिन मैं सोच रहा हूं कि क्या ड्रॉपडाउन मेनू में वर्तमान में चयनित मूल्य को बदलना संभव होगा।

उदाहरण के लिए, यदि लोड किए गए चार मान हैं: "Any", "Fruit", "Vegetable", "Meat"और ड्रॉपडाउन सूची डिफ़ॉल्ट रूप से "Any", मैं इसे "Fruit"JqGrid घटना में कैसे बदल पाऊंगा loadComplete?

क्या यह संभव है?

Answer 1

Select2 संस्करण के लिए> = 4.0.0

अन्य समाधान काम नहीं कर सकते हैं, हालांकि निम्नलिखित उदाहरणों पर काम करना चाहिए।

समाधान 1: ट्रिगर करने के लिए सभी संलग्न परिवर्तन घटनाओं का चयन करता है, जिसमें चयन 2 भी शामिल है

$('select').val('1').trigger('change');

समाधान 2: कारण सिलेक्ट 2 चेंज 2 इवेंट को ट्रिगर करने के लिए

$('select').val('1').trigger('change.select2');

इन उदाहरणों के लिए यह jsfiddle देखें । समाधान 2 के लिए @minlare को धन्यवाद।

स्पष्टीकरण:

कहते हैं कि मेरे पास लोगों के नामों के साथ एक सबसे अच्छा दोस्त है। इसलिए बॉब, बिल और जॉन (इस उदाहरण में मुझे लगता है कि मूल्य नाम के समान है)। पहले मैं अपने चयन पर select2 इनिशियलाइज़ करता हूँ:

$('#my-best-friend').select2();

अब मैं मैन्युअल रूप से ब्राउज़र में बॉब का चयन करता हूं। अगला बॉब कुछ शरारती करता है और मैं अब उसे पसंद नहीं करता। इसलिए प्रणाली मेरे लिए बॉब को अचयनित करती है:

$('#my-best-friend').val('').trigger('change');

या यह कहें कि मैं सिस्टम को बॉब के बजाय सूची में अगले का चयन करता हूं:

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');  

चयन 2 वेबसाइट पर नोट्स (देखें पदावनत और हटाए गए तरीके ) जो दूसरों के लिए उपयोगी हो सकते हैं:

.select2 ('वैल') "वैल" विधि को हटा दिया गया है और Select2 4.1 में हटा दिया जाएगा। पदावनत विधि में अब ट्रिगरचेंज पैरामीटर शामिल नहीं है।

आपको इसके बजाय सीधे अंतर्निहित तत्व पर कॉल करना चाहिए। यदि आपको दूसरे पैरामीटर की आवश्यकता है (ट्रिगरचेंज), तो आपको तत्व पर .trigger ("परिवर्तन") भी कॉल करना चाहिए।

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

Comments

यह सही जवाब है: यह दोनों में काम करता है मोनो का चयन करें और बहु का चयन करें

— Giovanni Di मिलिया

यह केवल तभी स्वीकार्य समाधान होता है, जब किसी के पास कोई कस्टम क्रिया नहीं होती है जो changeईवेंट के लिए बाध्य होती है (जैसे फ़ॉर्म को पुनः लोड करना)। अन्यथा उन कार्यों को ट्रिगर पर अतिरेक कहा जाएगा change()।

— van_folmert

यदि यह सही ढंग से काम नहीं करता है तो एक सेट टाइमआउट जोड़ें: सेटटाइमआउट (फ़ंक्शन () {$ ("चुनें")। वैल ("1 1")। ट्रिगर ("परिवर्तन");}, 1000);

— हाबिल

@van_folmert मेरे पास यही मुद्दा है। आदर्श रूप से, मैं एक घटना को बंद किए बिना जो कुछ भी दिखाया गया है उसे बदलना चाहता हूं (क्योंकि मेरे पास एक कस्टम है जो बाध्य है onChange)

— एक्री जूल 28'16

@Van_folmert समस्या को हल करने के एक उदाहरण के लिए नीचे मेरा जवाब देखें

— मीनलारे

Answer 2

को देखते हुए Select2 डॉक्स आप प्राप्त करने के लिए नीचे दिए गए का उपयोग करें / मूल्य निर्धारित किया है।

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes ने बताया है कि यह 4.x के लिए बदल गया है (नीचे उसे ऊपर ले जाएँ)। valअब सीधे कहा जाता है

$("#select").val("CA");

तो loadCompletejqGrid के भीतर आप जो कुछ भी मूल्य की तलाश कर रहे हैं उसे चुन सकते हैं फिर सेलेक्टबॉक्स मान सेट करें।

डॉक्स से सूचना

ध्यान दें कि इस पद्धति का उपयोग करने के लिए आपको विकल्पों में initSelection फ़ंक्शन को परिभाषित करना होगा इसलिए Select2 जानता है कि आपके द्वारा चयन को प्रस्तुत करने के लिए वैल () में पास की गई वस्तु की आईडी को वैल में कैसे बदलना है। यदि आप किसी चुनिंदा तत्व से जुड़ रहे हैं तो यह फ़ंक्शन आपके लिए पहले से ही उपलब्ध है।

Comments

मैं जिस डेमो को देख रहा हूं, उसके साथ काम नहीं करता। यकीन नहीं क्यों, यह JqGrid में प्लग के तरीके के साथ कुछ करना हो सकता है।

— एडम के डीन

उत्तर अपडेट किया गया। ऐसा लगता है कि आपको मैन्युअल रूप से उस फ़ंक्शन को select2 इनिशियलाइज़ेशन में जोड़ना होगा ताकि यह पता चले कि valकॉल को कैसे संभालना है ।

— जैक

@ अदमकदीन: व्यक्ति अतिरिक्त परीक्षण कर सकता है कि कक्षा पर मौजूद अस्तित्व का परीक्षण करके नियंत्रण में <select>परिवर्तित किया गया है या नहीं । टूलबार को खोजने के सभी तत्वों में आईडी है जो उपसर्ग के साथ शुरू होता है और इसमें जैसा नाम होता है । आप प्राप्त करने के लिए उपयोग कर सकते हैं । select2select2-offscreen<select>gs_colModelgetGridParamcolModel

— ओलेग

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

— एडम के डीन

अब पदावनत: github.com/select2/select2/blob/master/dist/js/…

— Andrey

Answer 3

this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

यह मदद का होना चाहिए।

Comments

एकाधिक मूल्य उदाहरण: यह। $ ("# #Selector")। select2 ("डेटा", [{id: 1, text: "कुछ पाठ"}, {आईडी: 2, पाठ: "कुछ अन्य पाठ"}];

— रॉडनेराड

Answer 4

यह और भी आसान होना चाहिए।

$("#e1").select2("val", ["View" ,"Modify"]);

लेकिन सुनिश्चित करें कि आप जो मान पास करते हैं वह पहले से ही HTMl में मौजूद है

Answer 5

यदि आप नया जोड़ना चाहते हैं value='newValue'और text='newLabel', आपको यह कोड जोड़ना चाहिए:

1. इसमें नया विकल्प जोड़ें <select>:

   var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
   $(selLocationID).html(opt);

2. <select>चयनित मान में ट्रिगर परिवर्तन:

   $(selLocationID).val('newValue').trigger("change");

Comments

मुझे यह क्लीनर सेलेक्ट 2 'डेटा' के साथ गड़बड़ करने की तुलना में मिला है :) :) डोम को बदलें, सेलेक्ट 2 को बाकी का आंकड़ा दें।

— पॉलज

मैं सफारी पर परीक्षण कर रहा हूं, और यह एकमात्र समाधान है जो वास्तव में काम करता है। अन्य लोग अधिक स्पष्ट हैं और मैं उन्हें पसंद करूंगा, लेकिन कुछ से अधिक, मैं काम करने वाले कोड को पसंद करता हूं। और यह वह है। :)

— डेविड

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

— सैम

Answer 6

बस एक दूसरा उत्तर जोड़ना चाहता था। यदि आपने पहले सेलेक्ट को चयन 2 के रूप में प्रस्तुत किया है , तो आपको निम्नानुसार अपने चयनकर्ता में प्रतिबिंबित करना होगा:

$("#s2id_originalSelectId").select2("val", "value to select");

Answer 7

आपके पास दो विकल्प हैं - @PanPipes उत्तर के अनुसार आप निम्न कार्य कर सकते हैं।

$(element).val(val).trigger('change');

यह केवल तभी स्वीकार्य समाधान है जब किसी के पास परिवर्तन की घटना के लिए कोई कस्टम क्रिया न हो। इस स्थिति में मैं जिस समाधान का उपयोग करता हूं वह चयन 2 विशिष्ट घटना को ट्रिगर करना है जो चयन 2 प्रदर्शित चयन को अद्यतन करता है।

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

Comments

हां, यह सबसे अच्छा समाधान है। वास्तव में, मुझे लगता है कि जब मूल्य बदल जाता है तो डिस्प्ले को अपडेट करने के लिए Select2 को आंतरिक 'change.select2' इवेंट को स्वचालित रूप से ट्रिगर करना चाहिए। लेकिन, यह कम से कम कस्टम परिवर्तन इवेंट हैंडलर्स को ट्रिगर किए बिना, नए मूल्य से मेल खाने के लिए डिस्प्ले को अपडेट करने का एक सरल तरीका प्रदान करता है।

— डेवइनमेन

यह '$ (तत्व) (.val) (वैल) .trigger (' change.select2 ');' मेरे लिए काम किया। साभार @ मिनलारे

— रे

Answer 8

चयन 2 में चयनित स्ट्रिंग विकल्प सेट करने में कुछ परेशानी आ रही है:

विकल्प के साथ: "विकल्प string1 / विकल्प" का उपयोग किया जाता है:

$('#select').val("string1").change(); 

मान वाले विकल्प के साथ BUT: विकल्प मान "E" string1 / विकल्प:

$('#select').val("E").change(); // you must enter the Value instead of the string

उम्मीद है कि यह उसी मुद्दे से जूझ रहे किसी व्यक्ति की मदद करेगा।

Answer 9

यदि आप किसी एकल मान का चयन करना चाहते हैं तो उपयोग करें $('#select').val(1).change()

यदि आप कई मानों का चयन करना चाहते हैं तो सरणी में मान सेट करें ताकि आप इस कोड का उपयोग कर सकें $('#select').val([1,2,3]).change()

Comments

यदि आप वर्गाकार कोष्ठकों के नीचे स्ट्रिंग दर्ज करेंगे तो यह काम नहीं करेगा।

— उत्कर्ष पांडेय

Answer 10

V4 Select2 के लिए यदि आप चयन 2 के मान और ड्रॉप डाउन के टेक्स्ट प्रतिनिधित्व दोनों को बदलना चाहते हैं।

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

यह न केवल पर्दे के पीछे का मूल्य निर्धारित करेगा, बल्कि चयन 2 के लिए पाठ प्रदर्शन भी होगा।

Https://select2.github.io/announcements-4.0.html#removed-methods से खींचा गया

Comments

ट्रिगर करने का प्रयास करें ('change.select2')। ट्रिगर ('select2: select'); अगर सिर्फ बदलाव ही काफी नहीं है

— Tebe

Answer 11

मेरा अपेक्षित कोड:

$('#my-select').val('').change();

काम करने के लिए पूरी तरह से @PanPipes उपयोगी के लिए धन्यवाद।

Answer 12

यह करो

 $('select#id').val(selectYear).select2();

Comments

हालांकि यह कोड इस प्रश्न का उत्तर दे सकता है, कि यह कोड क्यों और / या इस बारे में अतिरिक्त संदर्भ प्रदान करता है कि यह प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— रोलस्टुफ़्लोरहेर

मैं JqGrid के बारे में ज्ञान नहीं है, लेकिन इस कोड के साथ आप सरल तरीके से Select2 मूल्य बदल सकते हैं

— Jaskaran सिंह Rajal

Answer 13

यदि आपके पास अजाक्स डेटा स्रोत है तो कृपया इसे बग मुक्त करने के लिए देखें

https://select2.org/programmatic-control/add-select-clear-items

// Select2 नियंत्रण सेट करें

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// preselected आइटम प्राप्त करें, और नियंत्रण में जोड़ें

var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

Answer 14

यदि आप किसी चयनित आइटम को तब सेट करना चाहते हैं जब आप पाठ को ड्रॉप डाउन सूची से जानते हैं और मूल्य नहीं जानते हैं, तो यहां एक उदाहरण है:

मान लीजिए कि आपने एक टाइमज़ोन का पता लगाया है और इसे सेट करना चाहते हैं, लेकिन time_zone_idउनमें मूल्य हैं।

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2'); 

Answer 15

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

फ़ॉन्ट: 2 प्रलेखन का चयन करें

Answer 16

आप बस सेट मूल्य के लिए प्राप्त / सेट विधि का उपयोग कर सकते हैं

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

या आप यह कर सकते हैं:

$('#select').val("E").change(); // you must enter the Value instead of the string