將轉換后的下拉列表的值標題更改為單選按鈕

Question

我正在使用以下腳本 ( jsfiddle ) 將下拉列表轉換為按鈕選擇。 但它根據選項的value顯示按鈕的文本。

有沒有辦法改變每個按鈕顯示的文本，而不改變按鈕的值？ 比如給它一個id (getElementById) 之類的？ 所以新按鈕就像： Option 1 、 Option 2 .. 等等。

當前代碼：

 // http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery // http://jsfiddle.net/ChinmayeeG/TkGP8/ $(function () { $('.radioSelect').each(function (selectIndex, selectElement) { var select = $(selectElement); var container = $("<div class='radioSelectContainer' />"); select.parent().append(container); container.append(select); select.find('option').each(function (optionIndex, optionElement) { var radioGroup = select.attr('id') + "Group"; var label = $("<label />"); container.append(label); $("<input type='radio' name='" + radioGroup + "' />").attr("value", $(this).val()) //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below.appendTo(label); $("<span>" + $(this).val() + "</span>").appendTo(label); }); //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click //optional - this logic handles unchecking when clicking on an already checked radio container.find(":radio + span").mousedown( function (e) { var $span = $(this); var $radio = $($span.prev()); if ($radio.is(':checked')) { var uncheck = function() { setTimeout(function () { $radio.prop('checked', false); }, 0); }; var unbind = function() { $span.unbind('mouseup', up); }; var up = function() { uncheck(); unbind(); }; $span.bind('mouseup', up); $span.one('mouseout', unbind); } else { select.val($radio.val()); } } ); select.change((function () { //select updates radio $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true); })); }); });

 /* http://jsfiddle.net/496c9/ */.radioSelectContainer > select { /*display: none;*/ }.radioSelectContainer > label { display: inline-block; margin: 0.3em 0.3em 0 0; background-color:#EFEFEF; border-radius:4px; border:1px solid #D0D0D0; }.radioSelectContainer > label > span { padding:0.2em; text-align:center; display:block; }.radioSelectContainer > label > input { position:absolute; top:-20px; }.radioSelectContainer > label > input:checked + span { background-color:#404040; color:#F7F7F7; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <select class="radioSelect" id="sizeOptions"> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="2XL">2XL</option> <option value="3XL">3XL</option> <option value="4XL">4XL</option> </select>

Answer 1

你的意思是像

http://jsfiddle.net/mplungjan/2bok3gn1/

const sizes = {"S":"Small","M":"Medium"...."4XL":"Huge"}

和

$("<span>" + sizes[$(this).val()] + "</span>").appendTo(label);