jquery操作select元素和option的实例代码

更新时间：2026-02-18 21:08:30作者：fang

废话不多说了，直接给大家贴代码，具体代码如下所示：

<html>

<head>

$(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的实例代码，希望对大家有所帮助。