• 目录

select标签

阅读量: 437 编辑

select标签

网页中的下拉选择器。

一、语法

选择框 <select> 标签：主要用于数据的选择，比如说我们常常在一些网站上填写：省份、城市、地区的时候，使用的就是 select

<form>
	<select name="province">
        <option value="1">北京</option>
        <option value="2" selected>上海</option>
    </select>
</form>

  • 属性 name：我们提交数据的时候，后台根据 name 来取前端传过去的数据

  • 和 <option> 一起使用，option 就是 select 中的一个个选项。

    • 属性 value：就是选择了的数据，并提交到后台的

    • 属性 selected，表明是否选中，也就是在 select 框中显示的那个选项

    • option 中的 value 属性表示 select 要提交的值

  • 一般结合 form 标签使用

二、代码实战

代码的详细解读，可以参考视频教程。

新建 html 文件 14-select.html ，编写下方程序，运行看看效果吧


<!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 action="/submit.do" method="get" >
            <div>地址：
                <select name="address" onchange="handleChange()">
                    <option value="1">北京</option>
                    <option value="2" selected>上海</option>
                    <option value="3">天津</option>
                </select>
            </div>
            <button type="submit">提交</button>
        </form>

        <script type="text/javascript">
            function handleChange(){
                alert('地址修改了')
            }
        </script>
    </body>
</html>
  • 目录