html 下拉列表 select

最新推荐文章于 2025-09-19 10:04:35 发布

原创最新推荐文章于 2025-09-19 10:04:35 发布 · 4.1k 阅读

13 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了HTML中下拉列表的使用方法，包括基本语法、属性设置如multiple和size，以及option标签的value和selected属性，通过实例展示了如何创建可多选且预设选项的下拉菜单。

下拉列表：

语法：

<select>

<option >选项显示的内容1</option>

<option >选项显示的内容2</option>

<option >选项显示的内容3</option>

</select>

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <select>
        <option >html</option>
        <option >css</option>
        <option >java</option>
        <option >python</option>
    </select>

</body>
</html>

标签属性：

multiple : 可选属性，只有一个属性值 'multiple' 默认情况下下拉列表只能选择一项，当设置 multiple="multiple" 时，下拉列表可以选择多项

size : 下拉列表展开之后可见列表的数目

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <select multiple="multiple" size="3">
        <option >html</option>
        <option >css</option>
        <option >java</option>
        <option >python</option>
        <option >c++</option>
        <option >c#</option>
        <option >c</option>
    </select>

</body>
</html>

option 标签属性

value : 选项值

selected : 是否选中

value 用来给 javascript 调用或者向服务器传递信息

selected 表示是否被选中，跟 radio 的 checked 是一样的意思

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

    <p> 选出你最拿手的：</p>
   
    <select multiple="multiple" size="4">
        
        <option >html</option>
        <option >css</option>
        <option >java</option>
        <option selected="selected">python</option>
        <option >c++</option>
        <option >c#</option>
        <option >c</option>
    </select>

</body>
</html>