如何显示与选项标签不同的所选值 [英] How to show different selected value than options label

问题描述

我有简单的html select:

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>

打开的组合框:

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

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

我要保持在浮动面板的长文本，但选择的选项时，我想看到一些短版看到小space.Is选项有任何解决方案，以显示不同的文本在封闭比开模

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?

推荐答案

我使用jQuery通过添加隐藏的选项来解决此问题，该选项将选定的值和文本解耦.只需覆盖将始终选择此隐藏选项并将其值更新为所需的值即可.在这种情况下，我将值用作文本，但是可以将其存储在一些自定义变量中

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>

其他方法是使用 bootstrap-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>

这篇关于如何显示与选项标签不同的所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！