1.創(chuàng)建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循環(huán)刪除,注意數(shù)組長度的動態(tài)變化
3.2 select.options.length = 0;
4.應(yīng)用
<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自己設(shè)置的 //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="查看結(jié)果" onclick="number();"> </body> </html> 1.動態(tài)創(chuàng)建select
function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加選項option
function addOption(){ //根據(jù)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("浦東新區(qū)","101")) sh.add(new Option("黃浦區(qū)","102")) sh.add(new Option("徐匯區(qū)","103")) sh.add(new Option("普陀區(qū)","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("玄武區(qū)","201")) nj.add(new Option("白下區(qū)","202")) nj.add(new Option("下關(guān)區(qū)","203")) nj.add(new Option("棲霞區(qū)","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="計算結(jié)點" onclick="calc()"> <input type=button value="刪除" onclick="remove()"> </body> </html> 以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
新聞熱點
疑難解答
