有关html select表单元素的一些技巧，包括select隐藏与显示、select可用不可用，动态创建select，添加option选项，删除选项option，获取option文本与值等。
1、select隐藏与显示：
$("selectlist").style.display=$("selectlist").style.display=="block"?"none":"block";
2、select 可用不可用：
<select
disabled="value">
document.getelementbyid("leveldroplist").disabled = "value"; //不可用
document.getelementbyid("leveldroplist").disabled = "value"; //可用
完整代码：
复制代码 代码示例:
<html>
<head>
<script language="javascript">
<!--
//oselect 列表的底部添加了一个新选项
function onload(){
var ooption = document.createelement("option");
ooption.text="ferrari";
ooption.value="4";
oselect.add(ooption);
}
function fnchange(){
odata.value+=ocars.options[ocars.selectedindex].text + " ";
}
//-->
</script>
</head>
<body onload="onload()">
<!--手工添加一个select-->
<!--1 uses the select element to create a drop-down list box-->
<select name="cats" size="1">
<option value="1">calico
<option value="2">tortie
<option value="3" selected>siamese
</select>
<p>
<!--2 select 元素创建了多项选择列表框，方法是设置了 size 和 multiple 标签属性。要获得多项选择列表框的选中选项，则须遍历 options 集合并检查 selected 是否被设为 true。-->
<select id="oselect" name="cars" size="3" multiple> <!--此处设置了3和multiple-->
<option value="1" selected>bmw
<option value="2">porsche
<option value="3" selected>mercedes
</select>
<p>
<!--3 以下演示option的用法-->
<select id="ocars" size="1" onchange="fnchange()">
<option value="1">宝马
<option value="2">保时捷
<option value="3" selected>大奔
</select>
<p>
<textarea id="odata"></textarea>
</body>
</html>
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 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;
