如何显示与选项标签不同的选定值

Question

I have simple html select:

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

opened combo box:

I dont see what I've selected, I don't want to set width, I want to show different text.

I want to keep those long texts in floating panel, but when option is selected, I want to see some short version to see option in small space.Is there any solution to show different text in closed than in opened mode?

Answer 1

I solved this problem using jQuery by adding hidden option that decouples selected value and text. Just override that this hidden option will be selected always and update its value to whatever you want. In this case I used value as text, but it can be stored in some custom 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>

Other approach is use bootstrap-select like in example:

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