选择选项中的不同文本然后显示

Question

我需要设计一个选择输入框，其中选项包含较长的文本信息（属性数据显示），但是当选择一个时，我只想显示更短的版本（属性值） （这将是提交的值）。

例如。

<select>
    <option data-display="level1" value="1"></option>
    <option data-display="level2" value="2" selected></option>
    <option data-display="level3" value="3"></option>
</select>

例如，当我看到输入框时，我希望看到文本“2”。但是，当我点击它选择一个选项时，我想看到三个描述，没有将所选文本“2”更改为“level2”。

我希望你们明白我的意思。

编辑： 这是我想要的行为的图像：

只有下拉列表中的选项显示“数据显示”

当选择该选项时，我只想看到该号码。

Answer 1

您需要为jquery使用自定义选择，例如this，并使用自定义模板来呈现项目和菜单。使用_renderButtonItem，_renderItem，_renderMenu等给定回调来提供包含所需信息和模板的元素。 另一种选择是使用theming/templating options Select2库。{/ p>

Answer 2

您必须添加2个事件监听器，1个用于focus，1个用于change。

focus应将innerHTML更改为数据显示值，而select应将其innerHTML更改为其值

$(document).ready(function() {
  $('select').focus(function() {
    $('option').each(function() {
      $(this).html($(this).data('display'));
    });
  }).on('change', function() {
    $('option').each(function() {
      $(this).html($(this).val());
    });
    $(this).blur();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-display="level1" value="1">1</option>
    <option data-display="level2" value="2" selected>2</option>
    <option data-display="level3" value="3">3</option>
</select>