js 操作select和option
生活随笔
收集整理的這篇文章主要介紹了
js 操作select和option
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
1.動態(tài)創(chuàng)建selectfunction createSelect(){var mySelect = document.createElement_x("select");mySelect.id = "mySelect"; document.body.appendChild(mySelect);}2.添加選項optionfunction addOption(){//根據(jù)id查找對象，var obj=document.getElementByIdx_x('mySelect');//添加一個選項 obj.add(new Option("文本","值")); //這個只能在IE中有效obj.options.add(new Option("text","value")); //這個兼容IE與firefox}3.刪除所有選項optionfunction removeAll(){var obj=document.getElementByIdx_x('mySelect'); obj.options.length=0;}4.刪除一個選項optionfunction removeOne(){var obj=document.getElementByIdx_x('mySelect');//index,要刪除選項的序號，這里取當前選中選項的序號var index=obj.selectedIndex; obj.options.remove(index);}5.獲得選項option的值var obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序號，取當前選中選項的序號var val = obj.options[index].value;6.獲得選項option的文本var obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序號，取當前選中選項的序號var val = obj.options[index].text;7.修改選項optionvar obj=document.getElementByIdx_x('mySelect');var index=obj.selectedIndex; //序號，取當前選中選項的序號var val = obj.options[index]=new Option("新文本","新值");8.刪除selectfunction removeSelect(){var mySelect = document.getElementByIdx_x("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.getElementByIdx_x(id)}function show(){var selectObj=$("area")var myOption=document.createElement_x("option")myOption.setAttribute("value","10")myOption.appendChild(document.createTextNode("上海"))var myOption1=document.createElement_x("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_x("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_x("select")nj.add(new Option("玄武區(qū)","201"))nj.add(new Option("白下區(qū)","202"))nj.add(new Option("下關區(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" onchange="choice()"></select> </div> <input type=button value="顯示" onclick="show()"> <input type=button value="計算結點" onclick="calc()"> <input type=button value="刪除" onclick="remove()"> </body> </html>改進版：在select中添加、修改、刪除option元素function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var word = document.createElement_x("OPTION"); word.text = arguments[i]; watch.keywords.add(word); // watch. is form name } } function watch_add(f){ // 增加 var word = document.createElement_x("OPTION"); word.text = f.word.value; f.keywords.add(word); } 但上述 add() 方法只在IE下有效，為兼容FF和Opera，對上述代碼進行了一下改進，改動后代碼如下： function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){var oOption=new Option(arguments[i],arguments[i]);document.getElementByIdx_x("MySelect")[i]=oOption; } } function watch_add(f){ // 增加var oOption=new Option(f.word.value,f.word.value);f.keywords[f.keywords.length]=oOption; }整個實例的完整代碼如下：<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>javascript select options text value</title> <meta name="keywords" content="javascript select options text value add modify delete set"> <meta name="description" content="javascript select options text value add modify delete set"> <script language="javascript"> <!-- function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){var oOption=new Option(arguments[i],arguments[i]);document.getElementByIdx_x("MySelect")[i]=oOption; } } function watch_add(f){ // 增加var oOption=new Option(f.word.value,f.word.value);f.keywords[f.keywords.length]=oOption; } function watch_sel(f){ // 編輯 f.word.value = f.keywords[f.keywords.selectedIndex].text; } function watch_mod(f){ // 修改 f.keywords[f.keywords.selectedIndex].text = f.word.value; } function watch_del(f){ // 刪除 f.keywords.remove(f.keywords.selectedIndex); } function watch_set(f){ // 保存 var set = ""; for(var i=0; i<f.keywords.length; i++){ set += f.keywords[i].text + ";"; } confirm(set); } //--> </script> </head> <body> <form name="watch" method="post" action=""> <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br> <script language="javascript"> <!-- watch_ini("我","你","妳","他","她","它","爾"); // 初始關鍵詞 //--> </script> <input type="text" name="word" /><br /> <input type="button" value="增加" onclick="watch_add(this.form);" /> <input type="button" value="修改" onclick="watch_mod(this.form);" /> <input type="button" value="刪除" onclick="watch_del(this.form);" /> <input type="button" value="保存" onclick="watch_set(this.form);" /> </form>用一個字符串創(chuàng)建一個數(shù)組方法:<script language="javascript"> </body></html><script>function spli(){datastr="2,2,3,5,6,6"; var str= new Array(); str=datastr.split(","); for (i=0;i<str.length ;i++ ) { document.write(str[i]+"<br/>"); } } spli(); </script今天調試了一段js，在ie上運行良好，在火狐上調試出現(xiàn)錯誤，查資料發(fā)現(xiàn)obj.add(new Option("文本","值")); //這個只能在IE中有效obj.options.add(new Option("text","value")); //這個兼容IE與firefox因為這段代碼，在網(wǎng)上查資料收藏了這篇文章，實時的溫故js共勉！！s操作checkbox,radio,select
博客分類：? JS ? 最近經(jīng)常用JS操作 select checkbox 及radio 幾個簡單函數(shù)記錄如下 以備查用? ?? Js代碼? function getRadioValue(radioName){??? ???? ????? var obj = document.getElementsByName(radioName);???? ????? var objLen= obj.length;???? ????? var i;??? ??? for (i = 0;i< objLen;i++){??? ??????? if (obj [i].checked==true) {??? ???????? return obj [i].value;???? ??????? }??? ????? }??? ????? return "";??? }???????????? ?? ?? ?? //獲取復選框的值??? function getCheckboxValue(radioName){??? ? var obj = document.getElementsByName(radioName);???? ? var objLen= obj.length;???? ? var i;??? ? var result="";??? for (i = 0;i<objLen;i++){??? ??? if (obj [i].checked==true) {??? ???? result+=obj [i].value+",";???? ??? }??? ? }??? ? return result;??? }??? ????????????? //復選框 是否處于 選中狀態(tài)??? function? CheckboxToChecked(eleName, cValue){??? ???? ? var obj = document.getElementsByName(eleName);???? ???? ? var objLen= obj.length;???? ? var i;??? ? var result="";??? for (i = 0;i<objLen;i++){??? ????? ??? if (obj [i].value==cValue) {??? ???? ???? obj [i].checked=true;??? ??? }else{??? ??? obj [i].checked=false;??? ??? }??? ? }??? ? return result;??? }??????? ????????? //checkBox至少選中一項??? function chkCheckBoxChs(objNam,txt){???? var obj = document.getElementsByName(objNam);???? var objLen= obj.length;???? var num=0;??? for (i = 0;i< objLen;i++){??? if (obj [i].checked==true) {??? num++;??? }??? }??? if(num==0){??? ???? alert(txt);??????? ????? return false;??? ???? }???? ??? return true;??? }?? function getRadioValue(radioName){? ? var obj = document.getElementsByName(radioName);? ? var objLen= obj.length;? ? var i;? for (i = 0;i< objLen;i++){? if (obj [i].checked==true) {? ? return obj [i].value;? }? ? }? ? return "";? } ?? //獲取復選框的值? function getCheckboxValue(radioName){? ? var obj = document.getElementsByName(radioName);? ? var objLen= obj.length;? ? var i;? ? var result="";? for (i = 0;i<objLen;i++){? if (obj [i].checked==true) {? ? result+=obj [i].value+",";? }? ? }? ? return result;? }? ?? //復選框 是否處于 選中狀態(tài)? function? CheckboxToChecked(eleName, cValue){? ? var obj = document.getElementsByName(eleName);? ? var objLen= obj.length;? ? var i;? ? var result="";? for (i = 0;i<objLen;i++){? ?? if (obj [i].value==cValue) {? ? obj [i].checked=true;? }else{? obj [i].checked=false;? }? ? }? ? return result;? } ?? //checkBox至少選中一項? function chkCheckBoxChs(objNam,txt){? var obj = document.getElementsByName(objNam);? var objLen= obj.length;? var num=0;? for (i = 0;i< objLen;i++){? if (obj [i].checked==true) {? num++;? }? }? if(num==0){? alert(txt); ? return false;? }? return true;? }? 其他 只讀的屬性的為 readOnly (注意大小寫)? Js代碼? function toReadOnly(ele ,flag){??? ??????? var obj=document.getElementById(ele);??? ??????? if(obj!=null){??? ???????????? if(flag==0){//可讀??? ??????????????? obj.readOnly=false;??? ???????????????? obj.style.backgroundColor="white";??? ???????????? }else{//只讀??? ???????????????? obj.readOnly=true;??? ???????????????? obj.value="";??? ???????????????? obj.style.backgroundColor="#D8D8D8";??? ???????????? }??? ????? }??? ??? }?? select操作? <html>? <body>? <script>? function test(){? var obj? = document.getElementById("temp");? var value = obj.options[obj.selectedIndex].value;? alert(value);? }? </script>? <form>? <select name="cars" id="temp" onclick="test();">? <option value="volvo">Volvo</option>? <option value="saab">Saab</option>? <option value="fiat">Fiat</option>? <option value="audi">Audi</option>? </select>? </form>? </body>? </html>? js獲取select元素的value值和文本的方法? 獲得選中的對象? var selectobj = document.getElementById("selectId");? 獲得索引;? var index = selectobj.selectedIndex;? 獲得選中的value的值? var value = selectobj.options[index].value? 文本的值:? var text = selectobj.options[index].text?轉載于:https://my.oschina.net/gxs2012/blog/139379
總結
以上是生活随笔為你收集整理的js 操作select和option的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： apache 错误日志 File doe
- 下一篇： sharing分片集合环境搭建【Mong