html select用法详解,select默认选中状态

发布时间:2020-01-14编辑:脚本学堂
有关html select标签的用法,select标签定义和用法,select默认选中状态的设置方法,不了解的朋友参考下。

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

<select>标签可选的属性
 

属性         值      描述
disabled  disabled  规定禁用该下拉列表
multiple   multiple 规定可选择多个选项。
name        name    规定下拉列表的名称。
size        number  规定下拉列表中可见选项的数目。

<select>标签全局属性
<select> 标签支持 HTML 中的全局属性。
<select>标签事件属性
<select> 标签支持 HTML 中的事件属性。
<select>标签用法举例
<select name="list">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
设置默认选中可在option 中添加 selected = "selected",具体举例如下:
<option value="2" selected="selected">test2</option>
给某个option 添加 selected = "selected" 属性就是默认选项

html select标签用法实例:

1,动态创建select
 

function createSelect(){
var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

//删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

2,option选项处理
 

//添加选项option
function addOption(){
//根据id查找对象,
var obj=document.getElementById('mySelect');
//添加一个选项
obj.add(new Option("文本","值"));
}

//删除所有选项option
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

//删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号,这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

//获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].value;

//获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index].text;

//修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号,取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");

3,设置select option被选中
 

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;
}
}
}
}