Giá trị hiển thị khác nhau cho văn bản chọn lọc bằng cách sử dụng select2.js

Question

Cố gắng triển khai menu thả xuống tùy chọn bằng cách sử dụng select2 plugin Có thể có giá trị được chọn để chỉ hiển thị tùy chọn 'giá trị' thay vì văn bản, vì vậy nếu tôi chọn ' Dollar Úc', văn bản đã chọn chỉ nên hiển thị 'AUD'

My mark-up trông giống như sau:

<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

Đơn giản chỉ cần sử dụng tùy chọn formatSelection. Nó cung cấp văn bản và giá trị của tùy chọn đã chọn và đặt văn bản của vùng lựa chọn.

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

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

Fiddle

Answer 2

Bạn có thể thử này

$('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

Thả xuống thực sự có hai phần một là Văn bản và khác là Giá trị. Văn bản dành cho quan điểm của người dùng và Giá trị được nhà phát triển sử dụng để sử dụng. Nếu bạn muốn hiển thị giá trị thì tôi nghĩ người dùng cuối của bạn có thể nhận được giá trị hiển thị thực tế, với điều này tôi sẽ đề nghị bạn có cả Văn bản và Giá trị giống nhau (như giá trị ở trên).

Answer 4

Ngay cả câu hỏi khó khăn này đã ở đây một thời gian và có thể khắc phục, tôi cũng có cùng một nghi ngờ và tôi nghĩ mình nên chia sẻ những gì mình có.

@Spokey câu trả lời là rất tốt và hoạt động. Tuy nhiên nó chỉ hoạt động nếu bạn đang thực hiện một lựa chọn đơn giản. Nếu bạn muốn tạo một hộp chọn nhiều, điều sẽ khó khăn hơn một chút, vì Select2 không cung cấp bất kỳ thuộc tính duy nhất nào để dễ dàng tìm thấy từng tùy chọn được chọn.

Đọc câu trả lời @HyperLink, tôi đã thay đổi cách suy nghĩ và cuối cùng cũng có kết quả làm việc. Sẽ rất khó nếu bạn thực sự chỉ muốn vượt qua giá trị được thể hiện, tôi đã lãng phí một vài giờ để cố gắng làm điều đó. Nhưng có một cách tiếp cận mới như thế này, mọi thứ trở nên dễ dàng hơn:

<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> 

Chỉ cần thêm những gì giá trị là trên văn bản thực tế, mà có thể sẽ không tạo sự khác biệt lớn cho người dùng, nhưng đối với chúng ta, nó sẽ giúp một nhiều. Sự khác biệt chính của câu trả lời javascript khác, là 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

Phiên bản 4 Chọn 2 sử dụng templateSelection thay vì 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 + ')'; 
    } 
});