选择元素：没有javascript的短名称和长名称？答案

【问题标题】：Select element: Short and Long names without javascript?选择元素：没有javascript的短名称和长名称？
【发布时间】：2009-10-18 08:20:48
【问题描述】：

是否有非javascript方法允许

例子：

展开的菜单将显示：

哲学101
宗教研究 202
冥想 303 简介
心智及其潜能 404

...而折叠的菜单将显示（对应的项目）：

菲尔 101
RELI 202
MEDI 303
头脑 404

我用这个做什么：

我正在尝试使用多个选择菜单清理表单的布局。使用 CSS width 属性可以实现菜单的统一宽度，但是当菜单折叠时，显示文本较长的项目会被截断。显示较短的文本可以解决此问题。

【问题讨论】：

标签： javascript forms menu html-select

【解决方案1】：

不，我知道没有任何方法可以在不使用 JS 的情况下做类似的事情。像这样的东西可能是一个可能的起点，但只适用于 Firefox：

<style>
    .sel:focus .l{display:; visibility: visible;}
    .sel:focus .s{display: none; visibility: hidden;}
</style>
<select class="sel">
    <option class='s'>ntry1</option>
    <option class='l'>entry aaaaaaa</option>
    <option class='s'>entry2</option>
    <option class='l'>entry bbbbbbb</option>
</select>

【讨论】：