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

我需要设计一个选择输入框，其中选项具有较长的文本和信息（属性数据显示），但当选择一个时，我只希望显示较短的版本（属性值）（将是提交的值）

例如

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

我希望你们能理解我的意思

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

只有下拉菜单中的选项显示“数据显示”

---

当选择该选项时，我只想看到数字。

您需要使用一个自定义的select，比如jquery，并使用自定义模板来呈现项目和菜单。使用给定的回调，如

\u renderButtonItem

，

\u renderItem

，

\u renderMenu

，为元素提供所需的信息和模板。

---

另一个选项是使用库的。

您必须添加两个事件侦听器，一个用于

焦点

，一个用于

更改

focus

应将

innerHTML

更改为其数据显示值，

select

应将其

innerHTML

更改为其值

$（文档）.ready（函数（）{
$（'select'）.focus（函数（）{
$（'option'）。每个（函数（）{
$（this.html（$（this.data（'display'））；
});
}).on（'change'，function（））{
$（'option'）。每个（函数（）{
$（this.html（$（this.val（））；
});
$（this.blur（）；
});
});

1.
2.
3.
“我希望你们能理解我的意思。”-不，一点也不。一点也没有。你在说什么文本-你的选项没有包含任何文本？什么是“三个描述”？你的问题不清楚，但听起来你只需要使用
选项
元素的文本和
值properly@CBroe，我相信他的意思是，当选择一个选项时，它应该显示值，但当他点击选择一个选项时，数据显示应该显示，单击时，只有值保持活动状态。这正朝着您的方向发展，请尝试并根据需要更改值的来源。此处不太清楚，但特别是这一部分：
我希望看到这三个描述
…谢谢，这几乎正是我想要的！单击“选择”按钮时，是否可以不更改所选输入的文本？例如，如果我现在单击您的示例，以前为“2”的选定输入将更改为“2级”。那么，在您修改其文本内容之前，只需检查该选项是否已选中…@CBroe，我在问题中添加了一个图像以澄清我的请求。。希望它有帮助。你不能这样做，因为它上面显示的实际上是选中的选项。如果你想让它在那里显示“2”，那么你必须接受下拉列表中显示的选项将同时显示为“level1”、“2”和“level3”。这在原生选择中是不可能的。您必须创建一个自定义选择字段。
<select>
    <option data-display="level1" value="1"></option>
    <option data-display="level2" value="2" selected></option>
    <option data-display="level3" value="3"></option>
</select>