超详细的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