超详细的HTML lt;selectgt; 标签用法和技巧介绍.pdf
文本预览下载声明
超详细的HTML select 标签⽤法及技巧介绍
HTML select 标签定义及使⽤说明
select 元素⽤来创建下拉列表。
select 元素中的 option 标签定义了列表中的可⽤选项。
select 元素可创建单选或多选菜单。当提交表单时，浏 器会提交选定的项⽬，或者
收集⽤逗号分隔的多个选项，将其合成⼀个单独的参数列表，并且在将 select 表单
数据提交给服务器时包括 name 属性。
提⽰和注释
提⽰：select 元素是⼀种表单控件，可⽤于在表单中接受⽤户输⼊。
HTML 4.01 与 HTML5之间的差异
HTML5 增加了⼀些新的属性。
实例
创建带有 4 个选项的选择列表：
select
option value=volvoVolvo/option
option value=saab Saab/option
option value=merce esMerce es/option
option value=au iAu i/option
/select
尝试⼀下 »
览器⽀持
所有主流浏 器都⽀持 select 标签。
属性
New ：HTML5 中的新属性。
属性 值 描述
autofocusNew autofocus 规定在页⾯加载时下拉列表⾃动获得焦点。
isable isable 当该属性为 true 时，会禁⽤下拉列表。
formNew form_id 定义 select 字段所属的⼀个或多个表单。
multiple multiple 当该属性为 true 时，可选择多个选项。
name name 定义下拉列表的名称。
规定⽤户在提交表单前必须选择⼀个下拉列表中
require New require 的选项。
size number 规定下拉列表中可见选项的数⽬。
全局属性
select 标签⽀持 HTML 的全局属性。
事件属性
select 标签⽀持 HTML 的事件属性。
相关⽂章
HTML DOM 参考⼿册： Select 对象
select标签的使⽤技巧总结
1.动态创建select
function createSelect(){
var mySelect = ocument .createElement(select);
mySelect .i = mySelect;
ocument .bo y .appen Chil (mySelect);
}
2.添加选项option
function a Option(){
//根据i 查找对象，
var obj = ocument .getElementByI (mySelect);
//添加⼀个选项
obj .a (new Option(⽂本,值));
}
3.删除所有选项option
function removeAll(){
var obj = ocument .getElementByI (mySelect);
obj .options.length=0;
}
4 .删除⼀个选项option
function removeOne(){
var obj = ocument .getElementByI (mySelect);
//in ex ,要删除选项的序号，这⾥取当前选中选项的序号
var in ex=obj .selecte In ex;
obj .options.remove(in ex);
}
5.获得选项option的值
var obj = ocument .getElementByI (mySelect);
var in ex=obj .selecte In ex; //序号，取当前选中选项的序号
var val = obj .options[in ex].value;
6.获得选项option的⽂本
var
显示全部