读取并修改元素内容
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>读取并修改元素的内容</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 <!--假设两个select元素，分别保存备选地区列表和选中地区列表 14 实现两选择框之间选项的交换： 15 包括：当个选中项左右移动 16 多个选中项左右移动 17 全左移和全右移 18 要求：两个select中的地区都要按照名称首字母排序 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的内容，先删除开头的空字符和<option> 12 // 在删除结尾的</option>和空字符 13 // 按</option>和空字符和<option>切割 14 // 将切割后的数组赋值给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中，结果保存到selArr中 25 this.selArr=this.selArr.concat(this.unselArr); 26 //清空unselArr 27 this.unselArr=[]; 28 break; 29 case "<<": 30 //将unselArr拼接到selArr中，结果保存到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>，将结果放入unsel的内容中 63 this.unsel.innerHTML="<option>"+this.unselArr.join("</option><option>")+"</option>"; 64 }else{//否则 65 this.unsel.innerHTML="";//将unsel内容设置为"" 66 } 67 //如果selArr的长度不为0 68 if(this.selArr.length!=0){ 69 this.selArr.sort();// 将selArr按默认排序 70 // 用</option><option>拼接selArr,再前加<option>,后加</option>，将结果放入sel的内容中 71 this.sel.innerHTML="<option>"+this.selArr.join("</option><option>")+"</option>"; 72 }else{//否则 73 this.sel.innerHTML="";//将sel的内容设置为"" 74 } 75 } 76 } 77 window.onload=function(){ 78 countries.init(); 79 }
效果展示：
