jquery操作select元素和option的實例代碼_jquery
- WBOY原創
- 2016-05-16 15:16:181013瀏覽
廢話不多說了，直接給大家貼程式碼，具體程式碼如下圖：
<html>
<head>
<title></title>
<!--添加jquery-->
<script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="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
function createSelect(id) {
$("body").append("<select id="+id+"></select>");
}
//根据select的id 添加选项option
function addOption(selectID,value,text) {
//根据id查找select对象，
var obj = $("#" + selectID + "");
$("<option></option>").val(value).text(text).appendTo(obj);
}
//根据value的值设置options默认选中项
function setDefaultByValue(selectID,value) {
var obj = $("#" + selectID + "");
obj.val(value);
}
//获得选中的Option Value；
function getOptionValue(selectID) {
//var obj = $("#" + selectID + " option:selected").val();
//上面和下面两种都可以
var obj = $("#" + selectID + "").find("option:selected").val();
return obj;
}
//获得选中的option Text;
function getOptionText(selectID) {
//var obj = $("#" + selectID + " option:selected").text();
//上面和下面两种都可以
var obj = $("#" + selectID + "").find("option:selected").text();
return obj;
}
//修改选中的option
function editOptions(selectID, newText, newValue) {
var obj = $("#" + selectID + "").find("option:selected");
obj.val(newValue).text(newText);
}
//根据 index 值删除一个选项option
function removeOneByIndex(selectID, index) {
var obj = $("#" + selectID + " option[index=" + index + "]");
obj.remove();
}
//根据 value值删除一个选项option
function removeOneByValue(selectID, text) {
var obj = $("#" + selectID + " option[value=" + text + "]");
obj.remove();
}
//****************以验证不可以根据text值取得option元素***********************
//根据text值删除一个选项option 感觉不可用 真的
//function removeOneByText(selectID, text) {
//var obj = $("#" + selectID + " option[text=" + text + "]");
//obj.remove();
//}
//****************以验证不可以根据text值取得option元素***********************
//删除所有选项option
function removeAll(selectID) {
var obj = $("#" + selectID + "");
obj.empty();
}
//删除select
function removeSelect(selectID){
var obj = $("#" + selectID + "");
obj.remove();
}
</script>
</head>
<body>
</body>
</html>
以上所述是小編給大家分享的jquery操作select元素和option的實例代碼，希望對大家有幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn