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

<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" 属性就是默认选项



 一些<select>标签的使用技巧总结

<!---一般的js用: 当选择值时运行绑定的函数-->
<select id="sel" onChange="sel_item()">
       <option>sys</option>
       <option>web</option>
       <option>plat</option>
</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 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;

}

}

}

}