select2.js

Question

का उपयोग कर चयन टेक्स्ट के लिए अलग-अलग प्रदर्शन मान select2 plugin का उपयोग कर कस्टम चयन ड्रॉपडाउन को कार्यान्वित करने का प्रयास करना क्या संभव है कि टेक्स्ट के बजाय केवल वास्तविक विकल्प 'मान' प्रदर्शित करने के लिए चयनित मान हो, इसलिए यदि मैंने ' ऑस्ट्रेलियन डॉलर ', चयनित पाठ केवल प्रदर्शित करना चाहिए' AUD

मेरे मार्क-अप इस तरह दिखता है:

<select name="convert-to" id="convert-to"> 
    <option value="AUD" data-currency="AUD">Australian Dollar</option> 
    <option value="USD" selected="selected">US Dollar</option> 
    <option value="JPY">Japanese Yen</option> 
    <option value="EUR">Euro</option> 
    <option value="GBP">British Pound</option> 
    <option value="CAD">Canadian Dollar</option> 
    <option value="HKD">Hong Kong Dollar</option> 
</select> 

Answer 1

सीधे शब्दों में formatSelection विकल्प का उपयोग करें। यह चयनित विकल्प का टेक्स्ट और मान प्रदान करता है और चयन का टेक्स्ट सेट करता है।

function formatSelection(val) { 
    return val.id; 
} 

$('select').select2({ 
    formatSelection: formatSelection, 
    width: 300 
}); 

Fiddle

Answer 2

आप इस

$('select').select2({ 
    width: 300 
}).change(function() { 
    $('a.select2-choice span').text($(this).val()); 
    // change select2 span to the selected value 
}).trigger('change'); 
    // trigger change the first time so the displayed text will change to value 

कोशिश कर सकते हैं

Test it here

Answer 3

ड्रॉप डाउन में वास्तव में दो भाग हैं पाठ एक और मूल्य है। टेक्स्ट उपयोगकर्ता के दृष्टिकोण के लिए है और डेवलपर द्वारा उसके उपयोग के लिए मूल्य का उपयोग किया जाता है। आप तो मान प्रदर्शित करने के रूप में मैं, लगता है कि इस विचार के साथ अपने अंत उपयोगकर्ता क्या वास्तव में प्रदर्शित मान का मतलब प्राप्त करने में सक्षम होना चाहिए कि मैं क्या सुझाव देगा तुम दोनों पाठ और एक ही रूप में ही मूल्य (ऊपर में मूल्य के रूप में है चाहते हैं)।

Answer 4

यहां तक ​​कि कठिन इस सवाल थोड़ी देर के लिए यहाँ किया गया है और शायद पर काबू पाने, मैं एक ही संदेह नहीं था और मुझे लगता है कि मैं साझा करना चाहिए कि मैं क्या मिल गया है।

@Spokey जवाब बहुत अच्छा है, और काम करता है। हालांकि यह केवल तभी काम करता है जब आप एक साधारण चयन कर रहे हों। यदि आप एक से अधिक चयन बॉक्स बनाना चाहते हैं, तो चीज़ थोड़ा और कठिन हो जाएगी, क्योंकि चयन 2 चयनित प्रत्येक विकल्प को आसानी से ढूंढने के लिए कोई अनूठी विशेषता प्रदान नहीं करता है।

पढ़ना @HyperLink जवाब है, मैं सोच का तरीका बदल गया है और अंत में एक काम कर परिणाम मिला। यह एक तरह से मुश्किल होगा यदि आप वास्तव में पारित करने के लिए सिर्फ मूल्य प्रदर्शित करना चाहते हैं, मैं ऐसा करने की कोशिश कर कुछ घंटों बर्बाद किया है।

<select name="convert-to" id="convert-to" multiple> 
    <option value="AUD">AUD - Australian Dollar</option> 
    <option value="USD">USD - US Dollar</option> 
    <option value="JPY">JPY - Japanese Yen</option> 
    <option value="EUR">EUR - Euro</option> 
    <option value="GBP">GBP - British Pound</option> 
    <option value="CAD">CAD - Canadian Dollar</option> 
    <option value="HKD">HKD - Hong Kong Dollar</option> 
</select> 

बस जोड़ा क्या मूल्य वास्तविक पाठ, जो संभवत: उपयोगकर्ता के लिए एक बड़ा अंतर नहीं होगा पर है, लेकिन हमारे लिए, यह एक में मदद मिलेगी: लेकिन इस तरह एक नया दृष्टिकोण है, चीजों को आसान हो जाता है बहुत। अन्य जवाब जावास्क्रिप्ट का मुख्य अंतर यह है change(function(){}) है:

change(function() { 
var options = $('.select2-search-choice > div'); 
i = 1; 
Array.prototype.forEach.call(options, function(o) { 
    o.id = 'choice'+i;    // optional, creating ids to 
    i++;        // find it easily if you want 

    aux = o.textContent.split(" - "); // Divide value from text 
    o.textContent = aux[0];   // Get first part, i.e, value 
    console.log(aux); 
}) 

Try it here

Answer 5

संस्करण का चयन 2 से 4 का उपयोग करता है templateSelection बजाय formatSelection:
https://select2.github.io/announcements-4.0.html#changed-templating
https://select2.github.io/options.html#templateSelection

$element.select2({ 
    /** 
    * @param {Object} item 
    * @param {Boolean} item.disabled 
    * @param {HTMLOptionElement} item.element 
    * @param {String} item.id 
    * @param {Boolean} item.selected 
    * @param {String} item.text 
    * @returns {String} 
    */ 
    templateSelection: function(item) { 
     /** @type {jQuery} HTMLOptionElement */ 
     var $option = $(item.element); 
     var $optGroup = $option.parent(); 
     return $optGroup.attr('label') + ' (' + item.text + ')'; 
    } 
});