html <select>标签

Select标签

下拉选项，可能最常见的就是一些选择城市地区的下拉项，或者页面菜单的筛选项。

<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>

实现效果：

select表示下拉标签，option表示每个下拉节点项

======================================

======================================

下面是select标签不同的实现方式：

#HTML的下拉项和服务端进行数据交互时：
一般是要给select标签设置name，option里面要设置value值的

<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>

目的在于：

当HTML页面选择了某个下拉选项后，传输到服务器时，数据就会以键值对类型进行传输过去；

（如：传输给服务端的数据为：{city:beijing}这种格式，看到city就知道这个是代表html页面选择的是city这个下拉标签，而选择的值是beijing这个节点选项。）

#select下拉标签，也可以做成一个下拉列表的样式，存在滚动条。（应用于：数量过多的时候，或者想要多选的时候）

实现方法：
只需要给select标签里面加上一个multiple=“multiple”（这种可以直接写成multiple，表示复数的意思）

户籍：<select name="city" multiple> 
<option value="beijing">北京</option> 
<option value="shanghai">上海</option> 
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="hangzhou">杭州</option> 
<option value="wuhan">武汉</option> 
<option value="chengdu">成都</option>
 <option value="fujian">福建</option> 

页面效果：

#规定标签内容一页展示多少数量
户籍：<select name="city" multiple size="3">    //直接加一个size属性，并赋予数量即可。

页面效果：每滚动一次，只展示3条数据

 

最后一个就是分组<optgroup>
介绍：使用这个标签来将内容分成组别区域，然后每个组别再展示不同的内容，比如：省市区，这样展示（当然现在是仅在一个下拉列表内展示的内容）
----->>后面可以使用js来做三级联动的一个效果！！！

户籍：<select name="city" multiple >
    <optgroup label="北京">
        <option value="chaoyangqu">朝阳区</option>
        <option value="haidianqu">海淀区</option>
    </optgroup>

    <optgroup label="福建省">
        <option value="xiamenshi">厦门市</option>
        <option value="fuzhou">福州市</option>
    </optgroup>

    <optgroup label="江苏省">
        <option value="suzhoushi">苏州市</option>
        <option value="nantongshi">南通市</option>
        <option value="nanjingshi">南京市</option>
    </optgroup>
</select>

页面效果：