如何在html下拉列表中显示类别名称?

时间:2013-03-29 19:56:46

标签: html html5 select drop-down-menu

我在表单中有一个下拉列表。有很多项目。我想在下拉列表中显示用户将能够看到但无法选择的类别名称。

到目前为止,我有这个。但显然它不起作用。

<select id="item_name" name="item_name">
                    <dl>
                        <dt>Category 1</dt>
                            <dd><option value="1">Item 1</option></dd>
                            <dd><option value="2">Item 2</option></dd>
                            <dd><option value="3">Item 3</option></dd>
                        <dt>Category 2</dt>
                            <dd><option value="4">Item 4</option></dd>
                            <dd><option value="5">Item 5</option></dd>
                            <dd><option value="6">Item 6</option></dd>
                    </dl>
                </select>

3 个答案:

答案 0 :(得分:9)

您需要使用optgroup elements

<select>
    <optgroup label="Category 1">
        <option>Item 1</option>
        <option>Item 2</option>
    </optgroup>
    <optgroup label="Category 2">
        <option>Item 3</option>
        <option>Item 4</option>
    </optgroup>
</select>

Example on jsfiddle

答案 1 :(得分:2)

html optgroup?

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

<select name="whatever">
  <optgroup label="Category 1">
    <option value="1.1">Item 1.1</option>
    <option value="1.2">Item 1.2</option>
    <option value="1.3">Item 1.3</option>
    <option value="1.4">Item 1.4</option>
  </optgroup>
  <optgroup label="Category 2">
    <option value="2.1">Item 2.1</option>
    <option value="2.2">Item 2.2</option>
    <option value="2.3">Item 2.3</option>
    <option value="2.4">Item 2.4</option>
  </optgroup>
</select> 

答案 2 :(得分:1)

请检查select元素的定义:

http://www.w3.org/wiki/HTML/Elements/select

不允许<dl>出现在选择下拉列表中。对于那些您知道属于类别的选项,您可以使用样式属性来实现此效果。