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

前端技术 2023/09/08 JavaScript

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

<!DOCTYPE html PUBLIC \"-//WC//DTD XHTML . Transitional//EN\" \"http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd\">
<html xmlns=\"http://www.w.org//xhtml\">
<head>
<title></title>
<!--添加jquery-->
<script src=\"../Script/jQuery/jquery-...min.js\" type=\"text/javascript\"></script>
<script type=\"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的元素
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的实例代码，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/22019

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案