更改与实际选项文本不同的下拉选择文本答案

【问题标题】：Change dropdown selected text different than actual option text更改与实际选项文本不同的下拉选择文本
【发布时间】：2013-02-21 03:35:38
【问题描述】：

有多个选项的下拉菜单。第一个选项被选中，因此您可以在第一次查看下拉菜单时看到此选项文本（折叠状态）。

有没有办法在下拉状态下只显示部分选定的选项文本，但当展开时，然后用全文显示这个对应的选项？

为了更好地理解我想要什么，我做了图：http://goo.gl/BSwOi

【问题讨论】：

您的绘图不再起作用了。下次，将其作为图片上传到问题中

标签： html select drop-down-menu options

【解决方案1】：

例如，只需固定宽度。我使用了这个 HTML：

<select style="width: 40px">
    <option value="Volvo">Volvo</option>
    <option value="Saab">Saab</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
</select>

演示：http://jsfiddle.net/MzZxG/

【讨论】：

想过这个问题，但是如果选项文本包含 3 个单词（不同长度）并且您只需要将选项文本的第一个单词显示为折叠的下拉可见文本怎么办？如果有多个这样的下拉菜单？ - 这意味着我应该为每个人提供不同的宽度。如果选项值是动态的呢？
@Gaccho 然后你必须使用 jQuery 通过在选项中找到最长的第一个单词来设置宽度，然后将字母数乘以 5px。这将为所有人动态地做到这一点。
所以：我们在一个特定的下拉列表中确定选项文本中最长的第一个单词。假设它是 9。我们设置由此计算的下拉宽度。那么当在这个下拉列表中选择的选项第一个单词的长度是 5 时会发生什么？ - 它会显示第一个单词 + 4 个后续字符，对吗？无论如何 - 在不改变下拉菜单的宽度的情况下是否有任何其他方法可以做到这一点？
您会在下拉更改时调用重新计算。不幸的是，没有其他方法可以做到这一点，您想要的是一个固定宽度的下拉菜单，但该固定宽度是可变的，取决于内容，所以上面概述的过程是您唯一真正的选择:)
我明白了。谢谢。我在想 - 使用格式为下拉列表而不是实际下拉列表是否值得？喜欢这里 - goo.gl/mLL2N .