HTML select控件

select控件

select控件用于创建下拉列表框（下拉菜单），并通过 option 元素创建列表中的选项，供用户从中选择。

定义 select控件时，在 select元素中设置 name 属性，并在每个option 元素中，通过 value 属性定义每个选项的值，通过 selected 属性指定该选项被默认选中。在 <option> 和 </option> 之间的文本，为该选项的显示值。

select控件支持单选，也支持多选，还可以对选项进行分组显示。提交表单时，select元素的 name 属性值，以及所有被选中的 option 元素的 value 属性值，都将会被提交到服务器端。

1）单选的select控件

默认情况下，select控件是单选的，即用户只能从下拉列表中选择一项。如：

<label for="unittype">Select unit type: </label>
<select id="unittype" name="unittype" autofocus >
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>

上述代码定义了一个只能单选的下拉列表，由于为Snipey 设置了selected属性，在页面加载时，它默认处于选中状态。运行结果如图 3‑24 所示：

图3-24 选项默认被选中

事实上，selected属性只是让某个选中默认被选中而已，页面加载完成后，用户可以随意选择任意一个选项。如，用户可以选择 Max，让它处于被选中状态，如图 3‑25 所示：

图3-25 改变被选中的选项

2）可多选的select控件

当设置multiple属性后，列表就支持多选，就可以有多个选项被同时选中。当然，也可以让多个选项默认被选中。

对于单选的下拉列表，只有一个选项可见的。支持多选后，就可以通过 size 属性，来定义可见的选项数目。size属性的值必须大于0，否则设置无效，并使用浏览器的默认值。如：

<label for="allowedunits">可多选的select控件: </label>
<select id="allowedunits" name="allowedunits" size="5" multiple required>
<option value="1" > Miner </option>
<option value="2" > Puffer </option>
<option value="3" > Snipey </option>
<option value="4" > Max </option>
<option value="5" > Firebot </option>
</select>

上述代码定义了一个可多选的下拉列表，运行结果如图 3‑26 所示：

图3-26 可多选的下拉列表

如果 size 属性的值小于选项的个数，就会显示为一个有滚动条的列表；如果 size 属性的值大于选项的个数，用户就可以通过点击空白区域，让所有的选项处于未选中状态。

说明：

关于size的默认值，各浏览器不尽相同。一般都是4，也就是说，默认有四个元素可见，即便是选项数少于四个，它默认也会保留显示四个元素的空间。

关于size的设置，各浏览器的支持也不尽相同，比如Google Chrome和Opera，如果用户设置的size小于默认值4，则设置无效，它要求最少有4个元素可见。Foxfire则不同，允许设置的size小于默认值，以用户设置的数目为准。

3） select的选项分组显示

当使用一个较长的选项列表时，对相关的选项进行组合显得更人性化。可以使用optgroup标签对选项进行分组，并通过 optgroup 标签的 label 属性来定义分组的标题。

如，把选项分为三组，它们分别是 group1、group2 和 group3：

<select name="c">
<optgroup label="group1">
<option value="1.1"> group1.1</option>
<option value="1.2"> group1.2</option>
<option value="1.3"> group1.3</option>
<optgroup label="group2">
<option value="2.1"> group2.1</option>
<option value="2.2"> group2.2</option>
<option value="2.3"> group2.2</option>
<optgroup label="group3">
<option value="3.1"> group3.1</option>
<option value="3.2"> group3.2</option>
<option value="3.3"> group3.3</option>
</select>

浏览器通常会对 optgroup 中的 option 缩进，从而将它们和optgroup 的标题文本区分开来。运行结果如图 3‑27 所示：

图3-27 选项分组显示

optgroup 标签中的内容不能被选择，它的值也不会提交给服务器。事实上，optgroup 标签只是让选项分组显示而已，并没有对 select控件产生其他任何影响。你仍然可以设置 multiple属性，让菜单支持多选，也可以为 option 增加 selected 来设置默认选项等。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML select控件相关推荐

JavaScript操作select控件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
Select控件实现联动下拉列表框效果
Select控件实现联动下拉列表框效果(无需数据库) Select控件属性介绍: ID属性:获取或设置分配给Select控件的编程标识符. Name属性:获取或设置与Select控件关联的唯一标识符. ...
菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
以编程方式在ASP.NET MVC中使用多个HTML Select控件
目录介绍使用代码使用JQuery 使用Razor和C# 兴趣点介绍很多时候,我们使用JavaScript或JQuery代码来操纵HTML控件,却不知道ASP.NET MVC与Razor和C# ...
Selenium处理Select控件
Selenium处理Select控件 1.介绍: 在进行Web应用自动化测试的过程中,Select下拉框是我们经常会操作的控件,Selenium针对这种控件封装了Select类供我们测试使用.当然,也 ...
前端学习之select控件的使用2，省市县三级联动选择，select控件属性、方法、事件的综合应用...
总结select控件的属性.方法.事件的使用.数据源使用json数据,包括json数据的遍历. <label for="sheng">省</label> & ...
elemtnui select控件结合树形控件实现自定义搜索方法
业务需求: 可以从下拉框中选择数据,也可以自定义搜索. 前端效果: 1:从下拉框中选择 2:自定义搜索 3:单选并赋值:也就是选中那个就回显那个代码实现: 1.首先需要用到select控件和tree ...
仿苹果 html5 combox,模仿combox(select)控件，不用为美化select烦恼了。
模仿combox(select)控件,不用为美化select烦恼了. 来源:中文源码网浏览: 次日期:2018年9月2日模仿combox(select)控件,不用为美化select烦 ...

HTML select控件

select控件

HTML select控件相关推荐

最新文章

热门文章