读取并修改元素内容
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>讀取并修改元素的內(nèi)容</title>
5 <meta charset="utf-8" />
6 <style>
7 select{width:100px;height:85px;}
8 div{display:inline-block;width:50px}
9 </style>
10 <script src="2_2.js"></script>
11 </head>
12 <body>
13 <!--假設(shè)兩個select元素，分別保存?zhèn)溥x地區(qū)列表和選中地區(qū)列表
14 實現(xiàn)兩選擇框之間選項的交換：
15 包括：當個選中項左右移動
16 多個選中項左右移動
17 全左移和全右移
18 要求：兩個select中的地區(qū)都要按照名稱首字母排序
19 -->
20 <select id="unsel" size="5" multiple>
21 <option>Argentina</option>
22 <option>Brazil</option>
23 <option>Canada</option>
24 <option>Chile</option>
25 <option>China</option>
26 <option>Cuba</option>
27 <option>Denmark</option>
28 <option>Egypt</option>
29 <option>France</option>
30 <option>Greece</option>
31 <option>Spain</option>
32 </select>
33 <div>
34 <button onclick="countries.move(this)">>></button>
35 <button onclick="countries.move(this)">></button>
36 <button onclick="countries.move(this)"><</button>
37 <button onclick="countries.move(this)"><<</button>
38 </div>
39 <select id="sel" size="5" multiple>
40 </select>
41 </body>
42 </html>
js代碼：
1 var countries={ 2 unsel:null,//保存左邊的select元素對象 3 sel:null,//保存右邊的select元素對象 4 unselArr:[],//保存未選中的國家名稱列表 5 selArr:[],//保存已選中的國家名稱列表 6 init:function(){ 7 //找到id為unsel的select元素對象保存在unsel中 8 this.unsel=document.getElementById("unsel"); 9 //找到id為sel的select元素對象保存在sel中 10 this.sel=document.getElementById("sel"); 11 //獲得unsel的內(nèi)容，先刪除開頭的空字符和<option> 12 // 在刪除結(jié)尾的</option>和空字符 13 // 按</option>和空字符和<option>切割 14 // 將切割后的數(shù)組賦值給unselArr 15 this.unselArr=this.unsel//-->select 16 .innerHTML//-->string 17 .replace(/^\s*<option>/,"") 18 .replace(/<\/option>\s*$/,"") 19 .split(/<\/option>\s*<option>/); 20 }, 21 move:function(btn){ 22 switch(btn.textContent){ 23 case ">>": 24 //將unselArr拼接到selArr中，結(jié)果保存到selArr中 25 this.selArr=this.selArr.concat(this.unselArr); 26 //清空unselArr 27 this.unselArr=[]; 28 break; 29 case "<<": 30 //將unselArr拼接到selArr中，結(jié)果保存到selArr中 31 this.unselArr=this.unselArr.concat(this.selArr); 32 //清空unselArr 33 this.selArr=[]; 34 break; 35 case ">": 36 //獲取unsel中所有option，保存在變量opts 37 var opts=this.unsel.getElementsByTagName("option"); 38 //從后向前遍歷opts 39 for(var i=opts.length-1;i>=0;i--){ 40 // 如果當前option被選中 41 if(opts[i].selected){ 42 // 從unselArr中刪除相同位置的元素，同時將刪除的元素壓入selArr中 43 this.selArr.push(this.unselArr.splice(i,1)); 44 } 45 } 46 break; 47 case "<": 48 var opts=this.sel.getElementsByTagName("option"); 49 for(var i=opts.length-1;i>=0;i--){ 50 if(opts[i].selected){ 51 this.unselArr.push(this.selArr.splice(i,1)); 52 } 53 } 54 break; 55 } 56 this.updateView(); 57 }, 58 updateView:function(){ 59 //如果unselArr的長度不為0 60 if(this.unselArr.length!=0){ 61 this.unselArr.sort();//將unselArr按默認排序 62 // 用</option><option>拼接unselArr,再前加<option>,后加</option>，將結(jié)果放入unsel的內(nèi)容中 63 this.unsel.innerHTML="<option>"+this.unselArr.join("</option><option>")+"</option>"; 64 }else{//否則 65 this.unsel.innerHTML="";//將unsel內(nèi)容設(shè)置為"" 66 } 67 //如果selArr的長度不為0 68 if(this.selArr.length!=0){ 69 this.selArr.sort();// 將selArr按默認排序 70 // 用</option><option>拼接selArr,再前加<option>,后加</option>，將結(jié)果放入sel的內(nèi)容中 71 this.sel.innerHTML="<option>"+this.selArr.join("</option><option>")+"</option>"; 72 }else{//否則 73 this.sel.innerHTML="";//將sel的內(nèi)容設(shè)置為"" 74 } 75 } 76 } 77 window.οnlοad=function(){ 78 countries.init(); 79 }效果展示：
轉(zhuǎn)載于:https://www.cnblogs.com/ws-zhangbo/p/5603218.html
總結(jié)
- 上一篇： swift Array 数组
- 下一篇： bootstrap-select实现下拉