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