select下拉表单-CFANZ编程社区

1.应用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用

<select>表单控件定义下拉列表

语法：

<select>

    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>

  ....
</select>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉表单</title>
</head>

<body>
       <form> 
            
            籍贯  
            <select>
                 <option>北京</option>
                 <option>吉林</option>
                 <option>长春</option>
            </select>    

        </form>
</body>

</html>

运行效果：

2.<select>中至少包含一对<option>

3.在<option>中定义selected="selected"时，当前项即为默认选中项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select下拉表单</title>
</head>

<body>
       <form> 
            
            籍贯  
            <select>
                 <option>北京</option>
                 <option selected="selected">吉林</option>
                 <option>长春</option>
            </select>    

        </form>
</body>

</html>

运行效果：