HTML <select> 标签有什么作用?
select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
Html Select option 如何设置某一项为默认选择项
<option selected = "selected">用 selected = "selected"默认选择。
设置某一项为默认选择项的实例代码(www.169it.com):
<select name="isAudit">
<option value="2">全部</option>
<option value="1" selected = "selected">通过</option> <!--这里默认--!>
<option value="0">未通过</option>
</select>
select 元素实例(www.)
创建带有 4 个选项的选择列表：
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
浏览器支持
所有主流浏览器都支持 <select> 标签。
标签定义及使用说明
<select> 元素用来创建下拉列表。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
使用html Select标签的常用技巧
1.动态创建select
function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}2.添加选项option
function addOption(){
//根据id查找对象，
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}3.删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}9.设置select optin被中
function removeSelect(){
// 向办件人员下拉列表动态添加员工
for ( var i = 0; i < json.length; i++) {
var newOption = new Option(json[i].empname, json[i].empid, i);
//向办件人员下拉列表添加员工信息
objDeal.options.add(newOption);
//客户业务员的Id不为空
if(empbyDealEmpId!="" || empbyDealEmpId!=0){
//员工id等于下拉列表中的值,则下拉列表被选中
if(empbyDealEmpId==objDeal.options[i].value){
//判断此下拉列表被选中
objDeal.options[i].selected=true;
}
}
}
}
提示：<select> 元素是一种表单控件，可用于在表单中接受用户输入。
HTML 4.01 与 HTML5之间的差异
HTML5 增加了一些新的属性。
属性
New：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|
| autofocusNew | autofocus | 规定在页面加载时下拉列表自动获得焦点。 |
| disabled | disabled | 当该属性为 true 时，会禁用下拉列表。 |
| formNew | form_id | 定义 select 字段所属的一个或多个表单。 |
| multiple | multiple | 当该属性为 true 时，可选择多个选项。 |
| name | name | 定义下拉列表的名称。 |
| requiredNew | required | 规定用户在提交表单前必须选择一个下拉列表中的选项。 |
| size | number | 规定下拉列表中可见选项的数目。 |
<select> 标签支持 HTML 的全局属性。
<select> 标签支持 HTML 的事件属性。
html select的事件详细介绍
onactivate : 当对象设置为活动元素时触发。
onafterupdate : 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate : Microsoft® Internet Explorer 6 新增 对象要被设置为当前元素前立即触发。
onbeforecut : 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate : 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus : 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste :在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeupdate : 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
onblur : 在对象失去输入焦点时触发。
onchange : 当对象或选中区的内容改变时触发。
onclick : 在用户用鼠标左键单击对象时触发。
oncontextmenu : 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect : 当用户将要对该对象制作一个控件选中区时触发。
oncut : 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick : 当用户双击对象时触发。
ondeactivate : 当 activeElement 从当前对象变为父文档其它对象时触发。
ondragenter : 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave : 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover : 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondrop : 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onerrorupdate :更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfocus : 当对象获得焦点时触发。
onfocusin :Microsoft® Internet Explorer 6 新增 当元素将要被设置为焦点之前触发。
onfocusout :Microsoft® Internet Explorer 6 新增 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp : 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown : 当用户按下键盘按键时触发。
onkeypress : 当用户按下字面键时触发。
onkeyup : 当用户释放键盘按键时触发。
onlosecapture : 当对象失去鼠标捕捉时触发。
onmousedown : 当用户用任何鼠标按钮单击对象时触发。
onmouseenter : 当用户将鼠标指针移动到对象内时触发。
onmouseleave :当用户将鼠标指针移出对象边界时触发。
onmousemove : 当用户将鼠标划过对象时触发。
onmouseout : 当用户将鼠标指针移出对象边界时触发。
onmouseover : 当用户将鼠标指针移动到对象内时触发。
onmouseup : 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel :Microsoft® Internet Explorer 6 新增 当鼠标滚轮按钮旋转时触发。
onmove : 当对象移动时触发。
onmoveend : 当对象停止移动时触发。
onmovestart : 当对象开始移动时触发。
onpaste : 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange : 当在对象上发生对象上发生属性更改时触发。
onreadystatechange : 当对象状态变更时触发。
onresize : 当对象的大小将要改变时触发。
onresizeend : 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart : 当用户开始更改控件选中区中对象的尺寸时触发。
onselectstart : 对象将要被选中时触发。
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <select> 标签
