快捷導(dǎo)航

JavaScript操作select元素和option的實(shí)例代碼

更新時(shí)間：2016年01月29日 14:05:42 作者：歐歐歐鋒_

這篇文章主要介紹了JavaScript操作select元素和option的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼，具體代碼如下所示：

<!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", "第一個(gè)數(shù)據(jù)");
addOption("addSel", "secord", "第二個(gè)數(shù)據(jù)");
addOption("addSel", "three", "第三個(gè)數(shù)據(jù)");
addOption("addSel", "four", "第四個(gè)數(shù)據(jù)");
addOption("addSel", "fives", "第五個(gè)數(shù)據(jù)");
removeOneByIndex("addSel", );
removeOneByObj("addSel", "secord");
//添加一個(gè)option更改事件 調(diào)用自己寫的方法
$("#addSel").change(function () {
alert("舊文本："+getOptionText("addSel") + "舊Value：" + getOptionValue("addSel"));
editOptions("addSel", "新文本","新Value"); //注意：不傳value值的時(shí)候 value值默認(rèn)為text的值
alert("新文本：" + getOptionText("addSel") + "新Value：" + getOptionValue("addSel"));
})
})
//動(dòng)態(tài)創(chuàng)建帶id的元素
function createSelect(element, id) {
var select = document.createElement(element);
select.id = id;
document.body.appendChild(select);
}
//根據(jù)select的id 添加選項(xiàng)option
function addOption(selectID,value,text) {
//根據(jù)id查找對(duì)象， 
var obj = document.getElementById(selectID); 
obj.options.add(new Option(text, value)); //這個(gè)兼容IE與firefox 
}
//刪除所有選項(xiàng)option
function removeAll(selectID) {
var obj = document.getElementById(selectID);
obj.options.length = ;
}
//根據(jù) index 值刪除一個(gè)選項(xiàng)option
function removeOneByIndex(selectID,index) {
var obj = document.getElementById(selectID);
//index,要?jiǎng)h除選項(xiàng)的序號(hào)，這里取當(dāng)前選中選項(xiàng)的序號(hào) 
//var index = obj.selectedIndex;//獲取選中的選項(xiàng)的index;
obj.options.remove(index);
}
//根據(jù) value或者text值刪除一個(gè)選項(xiàng)option
function removeOneByObj(selectID, textOrValue) {
var obj = document.getElementById(selectID);
//index,要?jiǎng)h除選項(xiàng)的序號(hào)，這里取當(dāng)前選中選項(xiàng)的序號(hào) 
//var index = obj.selectedIndex;//獲取選中的選項(xiàng)的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;
}
}
} 
//獲得一個(gè)Option Value；
function getOptionValue(selectID){
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào) 
var val = obj.options[index].value;
return val;
} 
//獲得一個(gè)option Text;
function getOptionText(selectID) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào) 
var val = obj.options[index].text;
return val;
}
//修改選中的option
function editOptions(selectID,newText,newValue) {
var obj = document.getElementById(selectID); 
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào) 
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的實(shí)例代碼，希望對(duì)大家有所幫助。

您可能感興趣的文章: