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

更新时间：2026-04-09 17:15:42作者：fang

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

<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">

<head>

$(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的元素

function createSelect(element, id) {

var select = document.createElement(element);

select.id = id;

document.body.appendChild(select);

}

//根据select的id 添加选项option

function addOption(selectID,value,text) {

//根据id查找对象，

var obj = document.getElementById(selectID);

obj.options.add(new Option(text, value)); //这个兼容IE与firefox

}

//删除所有选项option

function removeAll(selectID) {

var obj = document.getElementById(selectID);

obj.options.length = ;

}

//根据 index 值删除一个选项option

function removeOneByIndex(selectID,index) {

var obj = document.getElementById(selectID);

//index,要删除选项的序号，这里取当前选中选项的序号

//var index = obj.selectedIndex;//获取选中的选项的index;

obj.options.remove(index);

}

//根据 value或者text值删除一个选项option

function removeOneByObj(selectID, textOrValue) {

var obj = document.getElementById(selectID);

//index,要删除选项的序号，这里取当前选中选项的序号

//var index = obj.selectedIndex;//获取选中的选项的index;

for (var i = ; i < obj.options.length; i++) {

if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {

obj.options.remove(i);

break;

}

//获得一个Option Value；

function getOptionValue(selectID){

var obj = document.getElementById(selectID);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

return val;

}

//获得一个option Text;

function getOptionText(selectID) {

var obj = document.getElementById(selectID);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

return val;

}

//修改选中的option

function editOptions(selectID,newText,newValue) {

var obj = document.getElementById(selectID);

var index=obj.selectedIndex; //序号，取当前选中选项的序号

obj.options[index] = new Option(newText, newValue);

obj.options[index].selected = true;

}

//删除select

function removeSelect(){

var select = document.getElementById("select");

select.parentNode.removeChild(select);

}

</script>

</head>

<body>

</body>

</html>

以上所述是小编给大家分享的JavaScript操作select元素和option的实例代码，希望对大家有所帮助。