select标签

网页中的下拉选择器。

一、语法

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

代码语言：javascript

复制

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

属性 name：我们提交数据的时候，后台根据 name 来取前端传过去的数据
和<option>一起使用，option 就是 select 中的一个个选项。
- 属性 value：就是选择了的数据，并提交到后台的
- 属性 selected，表明是否选中，也就是在 select 框中显示的那个选项
- option 中的 value 属性表示 select 要提交的值
一般结合 form 标签使用

二、代码实战

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

代码语言：javascript

复制

<!DOCTYPE html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>select标签</title>
    </head>
&lt;body&gt;
    &lt;formaction=&#34;/submit.do&#34;method=&#34;get&#34;&gt;
        &lt;div&gt;地址：
            &lt;selectname=&#34;address&#34;onchange=&#34;handleChange()&#34;&gt;
                &lt;optionvalue=&#34;1&#34;&gt;北京&lt;/option&gt;
                &lt;optionvalue=&#34;2&#34;selected&gt;上海&lt;/option&gt;
                &lt;optionvalue=&#34;3&#34;&gt;天津&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;buttontype=&#34;submit&#34;&gt;提交&lt;/button&gt;
    &lt;/form&gt;

    &lt;scripttype=&#34;text/javascript&#34;&gt;
        function handleChange(){
            alert(&#39;地址修改了&#39;)
        }
    &lt;/script&gt;
&lt;/body&gt;

</html>