Question

我有一个选择选项，带有以下示例选项。

(TYT) Toyota

(HD) Honda

(MT) Mitsubishi

我想只在选择了'选项'后才能在选择框上显示缩写，而没有javascript事件监听器可以在选择时设置值。

即TYT或(TYT)也没问题。

有什么想法吗？

Answer 1

您可以使用jQuery来执行此操作，如下所示：

    <select>
      <option value="0" data-abbr="None">Select</option>
      <option value="12" data-abbr="TTT">Toyota</option>
      <option value="13" data-abbr="HD">Honda</option>
      <option value="14" data-abbr="MT">Mitsubishi</option>
    </select>

    <script type="text/javascript">
    $(document).ready(function () {
      $("select").change(function () {
        var option = $(this).find("option:selected");
        option.text(option.data("abbr"));
      });
    });
    </script>

生成选项时，只需使用rails来输入必要的data-abbr属性。

编辑这是一个没有JS的版本：

    <style type="text/css">
    option.TTT:after {
      content: " Toyota";
    }
    </style>
    <select>
      <option value="0" data-abbr="None">Select</option>
      <option value="12" class="TTT">TTT</option>
      <option value="13" data-abbr="HD">Honda</option>
      <option value="14" data-abbr="MT">Mitsubishi</option>
    </select>

当您在列表中查看时显示“TTT Toyota”，但在您选择时仅显示TTT值。每个选项都需要option.CLASS:after选择器。

将HTML中所选选项的显示值设置为与显示的选项文本不同

1 个答案: