Select의 option 값 다른 Select로 옮기기
Code>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select{
padding : 50px;
float:left;
margin: 10px;
}
</style>
</head>
<body>
<form>
<select id="sportall" multiple>
<option name="sport" id=c1 value="농구" >농구</option>
<option name="sport" value="축구" >축구</option>
<option name="sport" value="야구" >야구</option>
<option name="sport" value="하키" >하키</option>
</select>
<select id="copythat" name="copythat" multiple></select>
<button name="turnover" type="button" onclick = "turnto()">></button>
<button name="turnback" type="button" onclick = "turnfrom()"><</button>
<button name="allturnover" type="button" onclick = "turntoAll()">>></button>
<button name="allturnback" type="button" onclick ="turnfromAll()"><<</button>
<script>
function turnto(){
var box = document.getElementsByName("sport");
// 0.실패
// for(var i=0; i<box.length; i++){
// if(box[i].selected){
// document.querySelector('select[name=copythat]').innerHTML += box[i];
// }
// }
// 1. 실패
// for(var i=0; i<box.length; i++){
// if(box[i].selected){
// var add = document.createElement("option");
// var addwhat = document.createTextNode(box[i].text);
// add.appendChild(addwhat);
// document.querySelector("select[name=copythat]").appendChild(add);
// }
// }
// 2.성공
for(var i=0; i<box.length; i++){
if(box[i].selected){
document.getElementById("copythat").appendChild(box[i]);
}
}
}
function turnfrom(){
var box = document.getElementsByName("sport");
for(var i=0; i<box.length; i++){
if(box[i].selected){
document.getElementById("sportall").appendChild(box[i]);
}
}
}
function turntoAll(){
var box = document.getElementsByName("sport");
for(var i=0; i<box.length; i++){
document.getElementById("copythat").appendChild(box[i]);
}
}
function turnfromAll(){
var box = document.getElementsByName("sport");
for(var i=0; i<box.length; i++){
document.getElementById("sportall").appendChild(box[i]);
}
}
</script>
</form>
</body>
</html>
| cs |
댓글 없음:
댓글 쓰기