चयनित मूल्य को बूटस्ट्रैप से चयनकर्ता प्लगइन का उपयोग करके कैसे सेट करें

Question

मैं बूटस्ट्रैप-चयन प्लगइन का उपयोग कर रहा हूं :

HTML :

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

जावास्क्रिप्ट :

$('select[name=selValue]').selectpicker();

अब मैं इस सेलेक्ट का मान सेट करना चाहता हूँ जब बटन पर क्लिक करें ... कुछ इस तरह:

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

लेकिन ऐसा कुछ नहीं होता है।

इसे कैसे प्राप्त किया जा सकता है?

Comments

मुझे यकीन नहीं है कि आप क्या हासिल करना चाहते हैं, मान सेट में एक बार उपयोगकर्ता को उस विकल्प पर क्लिक करने के लिए सेट किया गया है

— टॉम सर्दू

हाँ क्योंकि वास्तव में मान एक विधि से अजाक्स कॉल पर आता है ...

— jcvegan

मान सही तरीके से चुना गया है, लेकिन आपने इसे नहीं देखा क्योंकि प्लगइन असली चयन को छिपाता है और एक

— अनऑर्डर्ड

हां मुझे पता है, लेकिन इसे कैसे ठीक किया जाए ... मेरा मतलब है ... उपयोगकर्ता को इस नियंत्रण पर चयन देखना होगा

— jcvegan

Answer 1

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

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

संपादित करें:

जैसे @blushrt बताते हैं, एक बेहतर समाधान है:

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

2 संपादित करें:

एकाधिक मानों का चयन करने के लिए, मानों को एक सरणी के रूप में पास करें।

Comments

एक बेहतर समाधान बस $('select[name=selValue]').val(1);$('.selectpicker').selectpicker('refresh');यह होगा: इस तरह आप केवल छिपे हुए चयन को बदल रहे हैं, कॉलिंग सिस्पिकर ('रिफ्रेश') बटन को फिर से खोल देता है।

— ब्लशर आर्ट

हाँ, यह तरीका बेहतर है @blushrt, मेरे जवाब में जोड़ा गया

— टॉम सरदुय

मैं एक ही मुद्दे का सामना कर रहा हूं कि मैं उन चुनिंदा मूल्यों का चयन करने में असमर्थ हूं जिन्हें उपयोगकर्ता ने निजी तौर पर चुना है।

— श्रीकांत पुलेला

क्या इसके बाद चयनकर्ता को ताज़ा करना आवश्यक है ?? @TomSarduy

— अंकित सुथार

@ankitsuthar, हाँ

— टॉम सरदयू

Answer 2

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

आपको बस इतना करना है। सीधे चयनकर्ता के उत्पन्न html को बदलने की आवश्यकता नहीं है, बस छिपे हुए चयन क्षेत्र को बदलें, और फिर चयनकर्ता ('ताज़ा') को कॉल करें।

Comments

यह सही उत्तर होना चाहिए! .Selectpicker ('रिफ्रेश') कमांड को कॉल करना एक सेलेक्टिव पिकर ड्रॉपडेलिस्ट के वर्तमान मूल्य को चुनने और अपडेट करने के लिए महत्वपूर्ण है। कृपया ध्यान दें, सभी .selectpicker तत्वों पर ताज़ा कॉल धीमा हो सकता है। यदि आप काम करने के लिए वस्तु को चुनते हैं, तो उस एकल चयन सूची में ताज़ा कॉल करना पसंद करते हैं।

— 1

$('.selectpicker').selectpicker('refresh'); यदि आप एक पृष्ठ पर selectpickers का एक बहुत है अपने प्रदर्शन को मार सकते हैं

— मिशेल

एक और समस्या मुझे मिली, यह चयन पर टिक नहीं करेगा।

— सजीर बाबू

Answer 3

$('.selectpicker').selectpicker('val', YOUR_VALUE);

Comments

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

— शिल्पी जायसवाल

Answer 4

यदि वैल्यू सेट करने के लिए "वैल" -पैमीटर का उपयोग किया जाता है, तो फ़िफ़ल देखें , किसी भी रिफ्रेश की आवश्यकता नहीं है । कई चयनित मानों को सक्षम करने के लिए मान के लिए कोष्ठक का उपयोग करें।

$('.selectpicker').selectpicker('val', [1]); 

Answer 5

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

इसने मेरे लिए काम किया।

Answer 6

वास्तव में आपका मूल्य निर्धारित है, लेकिन आपका चयनकर्ता ताज़ा नहीं है

जैसा कि आप प्रलेखन से पढ़ सकते हैं
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

ऐसा करने का सही तरीका होगा

$('.selectpicker').selectpicker('val', 1);

कई मानों के लिए आप मानों की सरणी जोड़ सकते हैं

$('.selectpicker').selectpicker('val', [1 , 2]);

Answer 7

आप तत्व पर वैल विधि को कॉल करके चयनित मान सेट कर सकते हैं।

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

यह एक बहु-चयन में सभी वस्तुओं का चयन करेगा।

$('.selectpicker').selectpicker('selectAll');

विवरण साइट पर उपलब्ध हैं: https://silviomoreto.github.io/bootstrap-select/modods/

Comments

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

— शिल्पी जायसवाल

Answer 8

$('selector').selectpicker('val',value);

चयनकर्ता के स्थान पर आप चयनकर्ता को उदाहरण के लिए कक्षा या आईडी दे सकते हैं: $('#mySelect').selectpicker('val',your_value)

Answer 9

var bar= $(#foo).find("option:selected").val();

Answer 10

ब्लशर्ट का थोड़ा बदलावजब आप विकल्पों के लिए "हार्ड कोडित" मूल्यों (अर्थात 1, 2, 3, 4 आदि) के लिए उत्तर नहीं रखते हैं)

मान लें कि आप <select>कुछ उपयोगकर्ताओं के GUID के विकल्प मानों के साथ रेंडर करते हैं। फिर आपको इसे सेट करने के लिए किसी तरह विकल्प के मूल्य को निकालने की आवश्यकता होगी <select>।

निम्नलिखित में हम चयन का पहला विकल्प चुनते हैं।

HTML :

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

जावास्क्रिप्ट :

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

हमने इसका उपयोग कई कीवर्ड के साथ चयन में किया है <select multiple>। इस मामले में प्रति डिफ़ॉल्ट कुछ भी नहीं चुना गया है, लेकिन हम चाहते थे कि पहला आइटम हमेशा चुना जाए।

Answer 11

@Blushrt के शानदार जवाब के आधार पर मैं इस प्रतिक्रिया को अपडेट करूंगा। बस का उपयोग कर -

$("#Select_ID").val(id);

काम करता है अगर आप चयनकर्ता को अपनी जरूरत की सभी चीजें पहले से लोड कर देते हैं।

Answer 12

$('.selectpicker').selectpicker("val", "value");

Comments

अब्द, मेरे पास php स्क्रिप्ट है जो jax फॉर्मेट को ajax में पास करती है जहाँ json फॉर्मेट कुछ इस प्रकार है: "कार": "8", "कलर्स": "रेड, ब्लू, व्हाइट"} । इस मामले में कैसे इस विधि $ ('। Selectpicker') का उपयोग करके selectpicker के अंदर जाँच की गई वस्तु "रंग" सम्मिलित कर सकते हैं । selectpicker ("val", "data.colors"); ?

— मिशेल जेवियर

Answer 13

$('.selectpicker').selectpicker('val', '0');

'0' उस आइटम का मान होने के साथ जिसे आप चयनित करना चाहते हैं

Answer 14

खैर एक और तरीका यह करने के लिए के साथ है इस कीवर्ड, तो आप बस में वस्तु प्राप्त कर सकते हैं इस और यह के मूल्य में हेरफेर। जैसे:

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });

Answer 15

इसके अलावा, आप इसे बहु-मूल्य के लिए कह सकते हैं

$(<your select picker>).selectpicker("val", ["value1", "value2"])

आप यहाँ और अधिक पा सकते हैं https://developer.snapappointments.com/bootstrap-select/methods/

Answer 16

$('.selectpicker option:selected').val();

बस विकल्प रखें: मान प्राप्त करने के लिए चयनित, क्योंकि बूटस्ट्रैप चयनकर्ता अलग-अलग तरीके से बदलते हैं और दिखाई देते हैं। लेकिन अभी भी चयनित वहाँ का चयन करें

Answer 17

उपयोगकर्ता आईडी तत्व के लिए, फिर

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

Answer 18

यह प्रयोग करें और यह काम करने वाला है:

 $('select[name=selValue]').selectpicker('val', 1);