1.動態建立select<br /> function createSelect(){<br />var mySelect = document.createElement("select");<br /> mySelect.id = "mySelect";<br /> document.body.appendChild(mySelect);<br /> }<br />2.添加選項option<br /> function addOption(){<br /> //根據id尋找對象，<br /> var obj=document.getElementById('mySelect');<br /> //添加一個選項<br />obj.add(new Option("文本","值")); //這個只能在IE中有效<br /> obj.options.add(new Option("text","value")); //這個相容IE與firefox<br /> }<br />3.刪除所有選項option<br /> function removeAll(){<br /> var obj=document.getElementById('mySelect');<br />obj.options.length=0;<br /> }<br />4.刪除一個選項option<br />function removeOne(){<br /> var obj=document.getElementById('mySelect');<br /> //index,要刪除選項的序號，這裡取當前選中選項的序號<br />var index=obj.selectedIndex;<br />obj.options.remove(index);<br /> }<br />5.獲得選項option的值<br />var obj=document.getElementById('mySelect');<br />var index=obj.selectedIndex; //序號，取當前選中選項的序號<br />var val = obj.options[index].value;<br />6.獲得選項option的文本<br />var obj=document.getElementById('mySelect');<br />var index=obj.selectedIndex; //序號，取當前選中選項的序號<br />var val = obj.options[index].text;<br />7.修改選項option<br />var obj=document.getElementById('mySelect');<br />var index=obj.selectedIndex; //序號，取當前選中選項的序號<br />var val = obj.options[index]=new Option("新文本","新值");<br />8.刪除select<br /> function removeSelect(){<br /> var mySelect = document.getElementById("mySelect");<br />mySelect.parentNode.removeChild(mySelect);<br /> }<br />整個執行個體的完整代碼如下：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><br /><head><br /> <meta http-equiv="Content-Type" content="text/html"><br /><head><br /> <mce:script language=JavaScript><!--<br /> function $(id)<br /> {<br /> return document.getElementById(id)<br /> }<br /> function show()<br /> {<br /> var selectObj=$("area")<br /> var myOption=document.createElement("option")<br /> myOption.setAttribute("value","10")<br /> myOption.appendChild(document.createTextNode("上海"))<br /> var myOption1=document.createElement("option")<br /> myOption1.setAttribute("value","100")<br /> myOption1.appendChild(document.createTextNode("南京"))<br /> selectObj.appendChild(myOption)<br /> selectObj.appendChild(myOption1)<br /> }<br /> function choice()<br /> {<br /> var index=$("area").selectedIndex;<br /> var val=$("area").options[index].getAttribute("value")<br /> if(val==10)<br /> {<br /> var i=$("context").childNodes.length-1;<br /> var remobj=$("context").childNodes[i];<br /> remobj.removeNode(true)<br /> var sh=document.createElement("select")<br /> sh.add(new Option("浦東新區","101"))<br /> sh.add(new Option("黃浦區","102"))<br /> sh.add(new Option("徐匯區","103"))<br /> sh.add(new Option("普陀區","104"))<br /> $("context").appendChild(sh)<br /> }<br /> if(val==100)<br /> {<br /> var i=$("context").childNodes.length-1;<br /> var remobj=$("context").childNodes[i];<br /> remobj.removeNode(true)<br /> var nj=document.createElement("select")<br /> nj.add(new Option("玄武區","201"))<br /> nj.add(new Option("白下區","202"))<br /> nj.add(new Option("下關區","203"))<br /> nj.add(new Option("棲霞區","204"))<br /> $("context").appendChild(nj)<br /> }<br /> }<br /> function calc()<br /> {<br /> var x=$("context").childNodes.length-1;<br /> alert(x)<br /> }<br /> function remove()<br /> {<br /> var i=$("context").childNodes.length-1;<br /> var remobj=$("context").childNodes[i];<br /> remobj.removeNode(true)<br /> }</p><p>// --></mce:script><br /><body><br /><div id="context"><br /> <select id="area" onchange="choice()"><br /> </select><br /></div><br /><input type=button value="顯示" onclick="show()"><br /><input type=button value="計算結點" onclick="calc()"><br /><input type=button value="刪除" onclick="remove()"><br /></body><br /></html><br />改進版：在select中添加、修改、刪除option元素<br />function watch_ini(){ // 初始<br />for(var i=0; i<arguments.length; i++){<br />var word = document.createElement("OPTION");<br />word.text = arguments[i];<br />watch.keywords.add(word); // watch. is form name<br />}<br />}<br />function watch_add(f){ // 增加<br />var word = document.createElement("OPTION");<br />word.text = f.word.value;<br />f.keywords.add(word);<br />}<br />但上述 add() 方法只在IE下有效，為相容FF和Opera，對上述代碼進行了一下改進，改動後代碼如下： function watch_ini(){ // 初始<br />for(var i=0; i<arguments.length; i++){<br /> var oOption=new Option(arguments[i],arguments[i]);<br /> document.getElementById("MySelect")[i]=oOption;<br />}<br />}<br />function watch_add(f){ // 增加<br /> var oOption=new Option(f.word.value,f.word.value);<br /> f.keywords[f.keywords.length]=oOption;<br />}</p><p>整個執行個體的完整代碼如下：<br /><!doctype html public "-//w3c//dtd html 4.0 transitional//en"><br /><html><br /><head><br /><title>javascript select options text value</title><br /><meta name="keywords" content="javascript select options text value add modify delete set"><br /><meta name="description" content="javascript select options text value add modify delete set"><br /><mce:script language="javascript"><!--<br />function watch_ini(){ // 初始<br />for(var i=0; i<arguments.length; i++){<br /> var oOption=new Option(arguments[i],arguments[i]);<br /> document.getElementById("MySelect")[i]=oOption;<br />}<br />}<br />function watch_add(f){ // 增加<br /> var oOption=new Option(f.word.value,f.word.value);<br /> f.keywords[f.keywords.length]=oOption;<br />}<br />function watch_sel(f){ // 編輯<br />f.word.value = f.keywords[f.keywords.selectedIndex].text;<br />}<br />function watch_mod(f){ // 修改<br />f.keywords[f.keywords.selectedIndex].text = f.word.value;<br />}<br />function watch_del(f){ // 刪除<br />f.keywords.remove(f.keywords.selectedIndex);<br />}<br />function watch_set(f){ // 儲存<br />var set = "";<br />for(var i=0; i<f.keywords.length; i++){<br />set += f.keywords[i].text + ";";<br />}<br />confirm(set);<br />}<br />// --></mce:script><br /></head><br /><body><br /><form name="watch" method="post" action=""><br /><select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br><br /><mce:script language="javascript"><!--<br />watch_ini("我","你","妳","他","她","它","爾"); // 初始關鍵詞<br />// --></mce:script><br /><input type="text" name="word" /><br /><br /><input type="button" value="增加" onclick="watch_add(this.form);" /><br /><input type="button" value="修改" onclick="watch_mod(this.form);" /><br /><input type="button" value="刪除" onclick="watch_del(this.form);" /><br /><input type="button" value="儲存" onclick="watch_set(this.form);" /><br /></form><br /></body><br /></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
