html 下拉列表 select

下拉列表：

语法：

<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>

html 下拉列表 select

悦读