如何显示与选项标签

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>

打开组合框：

我看不到我选择的内容，我不想设置宽度，我想显示不同的文字。

我希望将这些长文本保留在浮动面板中，但是当选择了选项时，我想看一些简短的版本来查看小空间中的选项。是否有任何解决方案可以在关闭时显示不同的文本而不是打开模式？ / p>

Answer 1

我使用jQuery解决了这个问题，添加了隐藏选项，将选定的值和文本分离。只需覆盖将始终选择此隐藏选项并将其值更新为您想要的任何值。在这种情况下，我使用值作为文本，但它可以存储在一些自定义

中

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>