jquery操作select元素和option的实例代码
废话不多说了，直接给大家贴代码，具体代码如下所示：
<html>
<head>
<title></title>
<!--添加jquery-->
<scriptsrc="../Script/jQuery/jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
createSelect("addSel");
addOption("addSel","first","第一个数据");
addOption("addSel","secord","第二个数据");
addOption("addSel","three","第三个数据");
addOption("addSel","four","第四个数据");
addOption("addSel","fives","第五个数据");
removeOneByIndex("addSel",0);
removeOneByValue("addSel","three");
//****************以验证不可以根据text值取得option元素***********************
//removeOneByText("addSel","第三个数据");
//****************以验证不可以根据text值取得option元素***********************
//removeAll("addSel");//删除select元素的所有options
//removeSelect("addSel");//删除select元素；
setDefaultByValue("addSel","four");//设置option的默认值
//添加一个option更改事件调用自己写的方法
$("#addSel").change(function(){
alert("旧文本："+getOptionText("addSel")+"旧Value："+getOptionValue("addSel"));
editOptions("addSel","新文本","新Value");//注意：不传value值的时候value值默认为text的值
alert("新文本："+getOptionText("addSel")+"新Value："+getOptionValue("addSel"));
})
})
//动态创建带id的select
functioncreateSelect(id){
$("body").append("<selectid="+id+"></select>");
}
//根据select的id添加选项option
functionaddOption(selectID,value,text){
//根据id查找select对象，
varobj=$("#"+selectID+"");
$("<option></option>").val(value).text(text).appendTo(obj);
}
//根据value的值设置options默认选中项
functionsetDefaultByValue(selectID,value){
varobj=$("#"+selectID+"");
obj.val(value);
}
//获得选中的OptionValue；
functiongetOptionValue(selectID){
//varobj=$("#"+selectID+"option:selected").val();
//上面和下面两种都可以
varobj=$("#"+selectID+"").find("option:selected").val();
returnobj;
}
//获得选中的optionText;
functiongetOptionText(selectID){
//varobj=$("#"+selectID+"option:selected").text();
//上面和下面两种都可以
varobj=$("#"+selectID+"").find("option:selected").text();
returnobj;
}
//修改选中的option
functioneditOptions(selectID,newText,newValue){
varobj=$("#"+selectID+"").find("option:selected");
obj.val(newValue).text(newText);
}
//根据index值删除一个选项option
functionremoveOneByIndex(selectID,index){
varobj=$("#"+selectID+"option[index="+index+"]");
obj.remove();
}
//根据value值删除一个选项option
functionremoveOneByValue(selectID,text){
varobj=$("#"+selectID+"option[value="+text+"]");
obj.remove();
}
//****************以验证不可以根据text值取得option元素***********************
//根据text值删除一个选项option感觉不可用真的
//functionremoveOneByText(selectID,text){
//varobj=$("#"+selectID+"option[text="+text+"]");
//obj.remove();
//}
//****************以验证不可以根据text值取得option元素***********************
//删除所有选项option
functionremoveAll(selectID){
varobj=$("#"+selectID+"");
obj.empty();
}
//删除select
functionremoveSelect(selectID){
varobj=$("#"+selectID+"");
obj.remove();
}
</script>
</head>
<body>
</body>
</html>
以上所述是小编给大家分享的jquery操作select元素和option的实例代码，希望对大家有所帮助。