如何顯示與選項標簽不同的選定值

Question

我有簡單的 html 選擇：

<select id="mySelect" style="width:10em">
  <option value="val1">Some long text for val 1</option>
  <option value="val2">Some long text for val 2</option>
  <option value="val3">Some long text for val 3</option>
</select>

打開的組合框：

我沒有看到我選擇了什么，我不想設置寬度，我想顯示不同的文本。

我想在浮動面板中保留那些長期文本，但選擇選項后，我希望看到一些簡短的版本，以便在小空間中看到選項。有沒有任何解決方案可以在關閉中顯示不同的文本，而不是在打開的模式下顯示不同的文本？

Answer 1

我使用 jQuery 通過添加將選定值和文本分離的隱藏選項解決了這個問題。 只需覆蓋將始終選擇此隱藏選項並將其值更新為您想要的任何值。 在這種情況下，我使用 value 作為文本，但它可以存儲在一些自定義 a

 var val = $("#mySelect").val(); var lbl = $("#mySelect option:selected").text(); $("#mySelect").prepend("<option value='" + val + "' data-value='selected' selected hidden>" + val + "</option>"); $("#mySelect").on('change', function() { var val = $("#mySelect").val(); var lbl = $("#mySelect option:selected").text(); $("#mySelect option[data-value='selected']").attr('value', val); $("#mySelect option[data-value='selected']").text(val); $("#mySelect").val(val); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2> jQuery hidden option </h2> <select id="mySelect" style="width:10em"> <option value="val1">Some long text for val 1</option> <option value="val2">Some long text for val 2</option> <option value="val3">Some long text for val 3</option> </select>

其他方法是使用bootstrap-select，如示例中所示：

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>