html中<select>标签用法解析及如何设置select的默认选中状态

Posted 2023-03-09

<select>标签定义和用法

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

<select>标签可选的属性

属性 值 描述

disabled disabled 规定禁用该下拉列表。

multiple multiple 规定可选择多个选项。

name name 规定下拉列表的名称。

size number 规定下拉列表中可见选项的数目。

<select>标签全局属性

<select> 标签支持 html 中的全局属性。

<select>标签事件属性

<select> 标签支持 HTML 中的事件属性。 参考技术A 方法有两种。
第一种通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >
第二种为通过前端js来控制选中的项:
< script type = "text/javascript" >
function change()
document.getElementById("sel")[2].selected=true;

</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />
获取<select>标签选中项文本的js代码为:
var val = document.all.Item.options[document.all.Item.selectedIndex].text;
var i=document.getElementById('sel').options[document.getElementById('sel').selectedIndex].value;