左右互相输入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
60px;
}
</style>
</head>
<body>
<select id="s1" size="7" multiple="multiple">
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<input type="button" value="向 右" id="btn-r" />
<input type="button" value="向 左" id="btn-l" />
<select id="s2" size="7" multiple="multiple">
<option>abc</option>
<option>xyz</option>
<option>ijk</option>
</select>
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var btn_r = document.getElementById("btn-r");
var btn_l = document.getElementById("btn-l");
btn_r.onclick = function(){
s2.appendChild(s1.selectedOptions[0]);
}
btn_l.onclick = function(){
s1.appendChild(s2.selectedOptions[0]);
}
</script>
可多项选择左右互取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
60px;
}
</style>
</head>
<body>
<select id="s1" size="7" multiple="multiple">
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<input type="button" value="向 右" id="btn-r" />
<input type="button" value="向 左" id="btn-l" />
<select id="s2" size="7" multiple="multiple">
<option>abc</option>
<option>xyz</option>
<option>ijk</option>
</select>
</body>
</html>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var btn_r = document.getElementById("btn-r");
var btn_l = document.getElementById("btn-l");
btn_r.onclick = function(){
for(var a = 0;true;a++){
s2.appendChild(s1.selectedOptions[0]);
}
}
btn_l.onclick = function(){
for(var b = 0;true;b++){
s1.appendChild(s2.selectedOptions[0]);
}
}
</script>