1 <head>
2 <title>无标题页</title>
3 <script type="text/javascript">
4 function ToRight(){
5 var selUnSelect = document.getElementById("selUnSelect");
6 var selSelected = document.getElementById("selSelected");
7 ///////////////////////////取得所有的子节点，然后从后向前遍历，如果被选中则移出左边，移入右边
8 var options = selUnSelect.options;
9 for(var i=options.length-1;i>=0;i--){
10 if(options[i].selected == true){
11 var option = options[i];
12 selUnSelect.removeChild(option);
13 selSelected.appendChild(option);
14 }
15 }
16 }
17 function ToLeft(){
18 var selUnSelect = document.getElementById("selUnSelect");
19 var selSelected = document.getElementById("selSelected");
20 ///////////////////////////取得所有的子节点，然后从后向前遍历，如果被选中则移出左边，移入右边
21 var options = selSelected.options;
22 for(var i=options.length-1;i>=0;i--){
23 if(options[i].selected == true){
24 var option = options[i];
25 selSelected.removeChild(option);
26 selUnSelect.appendChild(option);
27 }
28 }
29 }
30 function DeleteSong(){
31 var selUnSelect = document.getElementById("selUnSelect");
32 var options = selUnSelect.options;
33 for(var i=options.length-1;i>=0;i--){
34 var option = options[i];
35 if(option.selected == true){
36 selUnSelect.removeChild(option);
37 }
38 }
39 }
40 function AddSong(){
41 var songName = document.getElementById("addSong").value;
42 var selUnSelect = document.getElementById("selUnSelect");
43 if(songName == ""||songName=="请输入您要增加的歌曲"){
44 alert("请输入您要增加的歌曲名");return;
45 }
46 var option = document.createElement("option");
47 option.innerHTML = songName;
48 selUnSelect.appendChild(option);
49 }
50 </script>
51 </head>
52 <body>
53 <select multiple="multiple" size="4" id="selUnSelect" style="float:left;width:20%">
54 <option>死性不改</option>
55 <option>黄昏</option>
56 <option>天黑</option>
57 <option>天涯</option>
58 </select>
59 <div style="float:left;width:10%">
60 <input type="button" value=">>" id="btnToRight" onclick="ToRight()"/>
61 <input type="button" value="<<" id="btnToLeft" onclick="ToLeft()"/>
62 <input type="button" value="删除" id="btnDelete" onclick="DeleteSong()"/>
63
64 </div>
65 <select multiple="multiple" size="4" id="selSelected" style="float:left">
66
67 </select>
68 <input type="text" id="addSong" value="请输入您要增加的歌曲" onblur="if(this.value=='')this.value=this.defaultValue;else return;" onfocus="if(this.value==this.defaultValue){this.value=''}" style="color:Gray"/>
69 <input type="button" value="增加新歌" id="btnAdd" onclick="AddSong()"/>
70 </body>
71 </html>
结果如上图
