js實現左右選擇框
阿新 • • 發佈:2019-02-02
<script type="text/javascript">
//選擇
function a(){
//var option1=document.getElementsByName("option1");
var selected1=document.getElementById("selected1");
var option1=selected1.getElementsByTagName("option");
var selected2=document.getElementById("selected2");
for(var i=0;i<option1.length;i++){
if (option1[i].selected==true){
selected2.appendChild(option1[i]);
i--;
}
}
}
//全部選擇
function b(){
var selected1=document.getElementById("selected1");
var option1=selected1.getElementsByTagName("option");
var selected2=document.getElementById("selected2");
for (var i=0;i<option1.length;i++){
selected2.appendChild(option1[i]);
i--;
}
}
//刪除
function c(){
var selected2=document.getElementById("selected2");
var option2=selected2.getElementsByTagName("option");
var selected1=document.getElementById("selected1");
for (var i=0;i<option2.length;i++){
if(option2[i].selected==true){
selected1.appendChild(option2[i]);
i--;
}
}
}
//全部刪除
function d(){
var selected2=document.getElementById("selected2");
var option2=selected2.getElementsByTagName("option");
var selected1=document.getElementById("selected1");
for(var i=0;i<option2.length;i++){
selected1.appendChild(option2[i]);
i--;
}
}
</script>
<style type="text/css">
div {
width: 200px;
height:150px; /* 要想讓div顯示出來必須為其指定高度和寬度 */
border: 2px solid blue;
float: left;
text-align: center;
}
input{
width: 100px;
height:30px;
margin: 3px;
}
select {
width: 200px;
height:150px;
text-align: center;
}
#div2{
width: 150px;
height:150px;
}
.fontClass{
font-size: 30px;
}
</style>
</head>
<body>
<div id="div1" >
<select multiple="multiple" id="selected1" class="fontClass" >
<option name="option1">aaa</option>
<option name="option1">bbb</option>
<option name="option1">ccc</option>
</select>
</div>
<div id="div2">
<input type="button" value="選擇" onclick="a()"><br>
<input type="button" value="全部選擇" onclick="b()"><br>
<input type="button" value="刪除" onclick="c()"><br>
<input type="button" value="全部刪除" onclick="d()"></div>
<div id="div3">
<select multiple="multiple" id="selected2" class="fontClass"></select>
</div>
可以根據喜歡自己加css樣式