JavaScript操作select元素和option的实例代码
废话不多说了，直接给大家贴代码，具体代码如下所示：
<!DOCTYPEhtmlPUBLIC"-//WC//DTDXHTML.Transitional//EN""http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<htmlxmlns="http://www.w.org//xhtml">
<head>
<title></title>
<!--添加jquery-->
<scriptsrc="../Script/jQuery/jquery-...min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
createSelect("select","addSel");
addOption("addSel","first","第一个数据");
addOption("addSel","secord","第二个数据");
addOption("addSel","three","第三个数据");
addOption("addSel","four","第四个数据");
addOption("addSel","fives","第五个数据");
removeOneByIndex("addSel",);
removeOneByObj("addSel","secord");
//添加一个option更改事件调用自己写的方法
$("#addSel").change(function(){
alert("旧文本："+getOptionText("addSel")+"旧Value："+getOptionValue("addSel"));
editOptions("addSel","新文本","新Value");//注意：不传value值的时候value值默认为text的值
alert("新文本："+getOptionText("addSel")+"新Value："+getOptionValue("addSel"));
})
})
//动态创建带id的元素
functioncreateSelect(element,id){
varselect=document.createElement(element);
select.id=id;
document.body.appendChild(select);
}
//根据select的id添加选项option
functionaddOption(selectID,value,text){
//根据id查找对象，
varobj=document.getElementById(selectID);
obj.options.add(newOption(text,value));//这个兼容IE与firefox
}
//删除所有选项option
functionremoveAll(selectID){
varobj=document.getElementById(selectID);
obj.options.length=;
}
//根据index值删除一个选项option
functionremoveOneByIndex(selectID,index){
varobj=document.getElementById(selectID);
//index,要删除选项的序号，这里取当前选中选项的序号
//varindex=obj.selectedIndex;//获取选中的选项的index;
obj.options.remove(index);
}
//根据value或者text值删除一个选项option
functionremoveOneByObj(selectID,textOrValue){
varobj=document.getElementById(selectID);
//index,要删除选项的序号，这里取当前选中选项的序号
//varindex=obj.selectedIndex;//获取选中的选项的index;
for(vari=;i<obj.options.length;i++){
if(obj.options[i].innerHTML==textOrValue||obj.options[i].value==textOrValue){
obj.options.remove(i);
break;
}
}
}
//获得一个OptionValue；
functiongetOptionValue(selectID){
varobj=document.getElementById(selectID);
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index].value;
returnval;
}
//获得一个optionText;
functiongetOptionText(selectID){
varobj=document.getElementById(selectID);
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
varval=obj.options[index].text;
returnval;
}
//修改选中的option
functioneditOptions(selectID,newText,newValue){
varobj=document.getElementById(selectID);
varindex=obj.selectedIndex;//序号，取当前选中选项的序号
obj.options[index]=newOption(newText,newValue);
obj.options[index].selected=true;
}
//删除select
functionremoveSelect(){
varselect=document.getElementById("select");
select.parentNode.removeChild(select);
}
</script>
</head>
<body>
</body>
</html>
以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码，希望对大家有所帮助。