HTML中的下拉列表:<select>、<option>、<optgroup>。

最新推荐文章于 2025-06-19 03:39:14 发布

原创最新推荐文章于 2025-06-19 03:39:14 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

HTML新手学习专栏收录该内容

18 篇文章

订阅专栏

本文提供了一个HTML下拉列表的示例代码，包括普通下拉列表和分组下拉列表，展示了如何使用<select>、<option>及<optgroup>等标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉列表</title>
        <base target="_self">
    </head>
<body>
    <form>
        <!--普通的下拉列表-->
         <select>
             <option>北京</option>
             <option>上海</option>
             <option selected="selected">深圳</option>
             <option>广州</option>
         </select>
        <br>
        <br>
        <select>
            <optgroup label="北京">
                <option>x</option>
                <option>xx</option>
                <option>xxx</option>
            </optgroup>
            <optgroup label="上海">
                <option>xxxx</option>
                <option>xxxxx</option>
                <option>xxxxxx</option>
            </optgroup>
            <optgroup label="深圳">
                <option>s</option>
                <option>ss</option>
                <option>sss</option>
            </optgroup>
            <optgroup label="广州">
                <option>ssss</option>
                <option selected="selected">sssss</option>
                <option>ssssss</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

下拉列表的正确格式：

</optgroup>

</select>