चयन 2: प्रोग्रामेटिक रूप से नियंत्रित प्लेसहोल्डर

Question

मैं प्लेसहोल्डर को किसी ईवेंट पर चयन 2 बढ़ाने वाले नियंत्रण पर बदलना चाहता हूं।

तो मैं इस मिल गया है ...

<select id="myFoo" placeholder="Fight some foo..."> 

... जो फिर से बढ़ जाता है:

init: function(){ 
    $('#myFoo').select2(); 
}, 

... तो अब उसे उसके सही प्लेसहोल्डर है।

लेकिन तब मैं इसे एक घटना पर प्रतिक्रिया और प्लेसहोल्डर साफ़ करना चाहते हैं ...

someButtonPress: function(){ 
// $('#myFoo').placeholder(""); 
// $('#myFoo').attr('placeholder', ""); 
// $('#myFoo').select2('placeholder',""); 
// $('#myFoo').select2({placeholder:""}); 
// none of these work 
} 

यह बहुत बुनियादी लगता है, फिर भी मैं स्टंप्डया हूँ।

मुझे दस्तावेज़ों में कुछ भी नहीं मिला। क्या मेरी तलाश गलत स्थान पर हो रही है?

Answer 1

प्लेसहोल्डर अद्यतन करने के लिए एक और तरीका है का चयन तत्व पर "प्लेसहोल्डर" विशेषता) फिर से सेट, और Select2 (कॉल करने के लिए है:

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2(); 

बस याद रखें कि पहली बार Select2 करने के लिए यदि आप किसी विकल्प को पारित कर दिया , आपको उन्हें फिर से पास करने की आवश्यकता होगी (या केवल $ .fn.select2.defaults का उपयोग करके डिफ़ॉल्ट विकल्प सेट अप करें)।

Answer 2

अद्यतन

आप HTML data-placeholder विशेषता के माध्यम से प्लेसहोल्डर चुके हैं, तो आप के रूप में Fabian H. चलता है कि यह और नहीं आंतरिक विकल्प बदलने के लिए, तो यह दिखेगा की जरूरत है:

$select.attr("data-placeholder", "New placeholder text"); 
$select.data("select2").setPlaceholder(); 

या यदि नहीं, एक आंतरिक विकल्प का उपयोग करें select2.opts.placeholder:

var select2 = $select.data("select2"); 
select2.opts.placeholder = "New placeholder text"; 
select2.setPlaceholder(); 

यह नहीं है बिल्कुल सही है, लेकिन चयन 2 जेनरेट एचटीएमएल हैकिंग से बेहतर तरीका है।

1. this.$select.data("select2") ताकि आप
2. अगला मैं placeholder आंतरिक विकल्प को अद्यतन करने कर रहा हूँ या संबंधित बदलते (बाहर से उपयोग के लिए निर्यात किया उन लोगों के लिए न केवल) उसके गुण और तरीकों के लिए उपयोग मिलता है, आंतरिक Select2 वस्तु आप हो जाता है डेटा विशेषता
3. अंत में मैं आंतरिक विधि setPlaceholder को ट्रिगर कर रहा हूं जो नया प्लेसहोल्डर सेट करता है।

आशा है कि मदद करता है!

Answer 3

एक Select2 के प्लेसहोल्डर को अपडेट करने के साथ दूरदराज के डेटा (AJAX/JSONP) इस कोड का उपयोग: Brocks response को

$input = $("input#e7"); 
$input.attr("data-placeholder", "New placeholder"); 
var select2 = $input.data("select2"); 
select2.setPlaceholder(); 

क्रेडिट्स।

Answer 4

आप गतिशील प्लेसहोल्डर बदलना चाहते हैं, यह एचटीएमएल पर निर्धारित नहीं करते

<select id="myFoo"> 

सेट यह jQuery पर

$('#myFoo').select2({ 
    placeholder: "your placeholder" 
}); 

तो यह

someButtonPress: function(){ 
$('#myFoo').select2({ 
    placeholder: "change your placeholder" 
    }); 
} 

की तरह इसे अद्यतन यह मेरे लिए काम करता है, उम्मीद है कि यह मदद करता है।

Answer 5

मेरा मानना ​​है कि व्यवहार इस बात पर निर्भर करेगा कि आप किस 2 का चयन कर रहे हैं - हम v3.5.1 का उपयोग कर रहे हैं - लेकिन प्लेसहोल्डर को मांग पर बदलने के लिए मुझे थोड़ा अलग दृष्टिकोण लेना पड़ा। मेरे मामले में, चयनकर्ता दूसरे चयनकर्ता के मूल्य के आधार पर प्रस्तुत विकल्पों को बदलता है, जिसका अर्थ है कि प्लेसहोल्डर को नए डेटा सेट के साथ बदलना होगा।

यह काम करने के लिए, मैं HTML इनपुट तत्व में एक प्लेसहोल्डर के सभी संदर्भ निकाल किया था।

<input type="text" class="form-control span10"> 

फिर, जावास्क्रिप्ट में, जब भी मैं सही विकल्प के साथ तत्व लोड, मैं data() समारोह के माध्यम से प्लेसहोल्डर अद्यतन करने के लिए किया था:

selector.data('placeholder', placeholder); 
selector.select2({ data: new_data_set, tags: true }); 

अब हर बार काम करने के लिए लगता है कि।

Answer 6

मैं Select2 4.0.5 स्टैंडर्ड उपयोग कर रहा हूँ और मौजूदा समाधान या तो मेरे लिए काम नहीं किया या हर प्लेसहोल्डर अद्यतन है, जो मैं बचना चाहता था के लिए Select2 पुनः बनाने की आवश्यकता है।

मैं एक नया समाधान आया, भले ही यह एक हैक है। मैं आसानी से इसे बाद में उपयोग करने के लिए Select2 कंटेनर की दुकान है, तो जब मैं प्लेसहोल्डर मैं कंटेनर के भीतर प्लेसहोल्डर तत्व को खोजने का अद्यतन करें और अपने पाठ अद्यतन करने की आवश्यकता:

var selectorSelect2 = $('#selector').data('select2').$container; 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1'); 
... 
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');