Question

我希望在每个OPTION

中向我的HTML SELECT中显示列表中的值

DESCRIPTION | TYPE
-------------------
CAR          TERRESTRIAL
AIRPLANE     AIR
SHIP         WATER

这样的事情，有可能吗？感谢。

Answer 1

像大卫托马斯说的那样。这不是真的支持。但你可以破解它。使您的字体等宽，并使用不间断的空格相应地隔离您的选项文本对象。

示例：http://jsfiddle.net/Aq5LS/

为了使它真的很好，你需要实现自己的组合框。或者像Ext JS一样使用http://dev.sencha.com/deploy/ext-4.0.2a/examples/form/forum-search.html。仅仅为此使用Ext-JS绝对有点过头了，但它会告诉你可以做些什么。

Answer 2

您在标准HTML select元素中格式化文本的选项非常有限，我不知道以您请求的方式格式化选项元素的可靠方法。

一个选项是将描述放在每个选项的title属性中，当用户将鼠标悬停在选项上时会显示描述（此处不确定浏览器覆盖率）。

另一种选择是使用自定义下拉框控件，这样可以让您更自由地根据需要格式化选项。搜索“jquery dropdown”应该会给你一个很好的起点。

Answer 3

Demo

那里已经存在那样的。

<select>
  <optgroup label="Terestrial">
    <option value="Car">Car</option>
    <option value="Tank">Tank</option>
  </optgroup>
  <optgroup label="Air">
    <option value="Airplain">Airplain</option>
    <option value="Helicopter">Helicopter</option>
  </optgroup>
  <optgroup label="Water">
    <option value="Ship">Ship</option>
    <option value="Submarine">Submarine</option>
  </optgroup>
</select>

HTML SELECT列表显示每个OPTION的列中的描述

3 个答案:

Demo