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>