淺談下拉菜單中的Option對象

2024-05-06 16:19:49

字體：大中小

來源：轉載

供稿：網友

Option 對象代表 HTML 表單中下拉列表中的一個選項。在 HTML 表單中

1.創建Option對象

1.1 var optionEle1 = document.createElement('option');

1.2 var optionEle2 = new Option(text, value, defaultSelected, selected);

2.options屬性

2.1 select.options返回select標簽下面的Option對象的集合

3.清空下拉菜單

3.1 利用for循環刪除,注意數組長度的動態變化

3.2 select.options.length = 0;

4.應用

<html>

<head>

<script language="javascript">

function number(){

var obj = document.getElementById("mySelect");

//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在當前選中的那個的值中改變

//obj.options.add(new Option("我的吃吃","4"));再添加一個option

//alert(obj.selectedIndex);//顯示序號，option自己設置的

//obj.options[obj.selectedIndex].text = "我的吃吃";更改值

//obj.remove(obj.selectedIndex);刪除功能

}

</script>

</head>

<body>

<select id="mySelect">

<option>我的包包</option>

<option>我的本本</option>

<option>我的油油</option>

<option>我的擔子</option>

</select>

<input type="button" name="button" value="查看結果" onclick="number();">

</body>

</html>

1.動態創建select

function createSelect(){

var mySelect = document.createElement("select");

mySelect.id = "mySelect";

document.body.appendChild(mySelect);

}

2.添加選項option

function addOption(){

//根據id查找對象，

var obj=document.getElementById('mySelect');

//添加一個選項

obj.add(new Option("文本","值")); //這個只能在IE中有效

obj.options.add(new Option("text","value")); //這個兼容IE與firefox

}

3.刪除所有選項option

function removeAll(){

var obj=document.getElementById('mySelect');

obj.options.length=0;

}

4.刪除一個選項option

function removeOne(){

var obj=document.getElementById('mySelect');

//index,要刪除選項的序號，這里取當前選中選項的序號

var index=obj.selectedIndex;

obj.options.remove(index);

}

5.獲得選項option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當前選中選項的序號

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

6.獲得選項option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當前選中選項的序號

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

7.修改選項option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序號，取當前選中選項的序號

var val = obj.options[index]=new Option("新文本","新值");

8.刪除select

function removeSelect(){

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

mySelect.parentNode.removeChild(mySelect);

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html">

<head>

<script language=JavaScript>

function $(id)

{

return document.getElementById(id)

}

function show()

{

var selectObj=$("area")

var myOption=document.createElement("option")

myOption.setAttribute("value","10")

myOption.appendChild(document.createTextNode("上海"))

var myOption1=document.createElement("option")

myOption1.setAttribute("value","100")

myOption1.appendChild(document.createTextNode("南京"))

selectObj.appendChild(myOption)

selectObj.appendChild(myOption1)

}

function choice()

{

var index=$("area").selectedIndex;

var val=$("area").options[index].getAttribute("value")

if(val==10)

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

var sh=document.createElement("select")

sh.add(new Option("浦東新區","101"))

sh.add(new Option("黃浦區","102"))

sh.add(new Option("徐匯區","103"))

sh.add(new Option("普陀區","104"))

$("context").appendChild(sh)

}

if(val==100)

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

var nj=document.createElement("select")

nj.add(new Option("玄武區","201"))

nj.add(new Option("白下區","202"))

nj.add(new Option("下關區","203"))

nj.add(new Option("棲霞區","204"))

$("context").appendChild(nj)

}

}

function calc()

{

var x=$("context").childNodes.length-1;

alert(x)

}

function remove()

{

var i=$("context").childNodes.length-1;

var remobj=$("context").childNodes[i];

remobj.removeNode(true)

}

</script>

<body>

<div id="context">

<select id="area" on

change="choice()">

</select>

</div>

<input type=button value="顯示" onclick="show()">

<input type=button value="計算結點" onclick="calc()">

<input type=button value="刪除" onclick="remove()">

</body>

</html>