<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>listbox實例</title>
<script>
/*
Auth：FattigerTao
QQ:694871175
Date:2014-08-05
<span style="white-space:pre"> </span>Company:FT胖虎工作室
<span style="white-space:pre"> </span>WebSit:http://home.zhubajie.com/7283462/info.html
<span style="white-space:pre"> 轉載註明出處</span>
*/
function moveRightAll(){
var left = document.getElementById("left");
var right = document.getElementById("right");
for(i = 0; i < left.length; i ++ ) {
var option = new Option();
option.text = left[i].innerText;
right.add(option);
left.options.remove(left[i--]);
}
}
function moveRight(){
var left = document.getElementById("left");
var right = document.getElementById("right");
for(var i = 0; i < left.length; i ++ ) {
if(left[i].selected == true) {
var option = new Option();
option.text = left[i].innerText;
right.add(option);
}
}
for(var j = 0; j < left.length; j++){
if(left[j].selected){
left.remove(left.selectedIndex);
j--;
}
}
}
function moveLeft(){
var left = document.getElementById("left");
var right = document.getElementById("right");
for(var i = 0; i < right.length; i ++ ) {
if(right[i].selected == true) {
var option = new Option();
option.text = right[i].innerText;
left.add(option);
}
}
for(var j = 0; j < right.length; j++){
if(right[j].selected){
right.remove(right.selectedIndex);
j--;
}
}
}
function moveLeftAll(){
var left = document.getElementById("left");
var right = document.getElementById("right");
for(var i = 0; i < right.length; i++){
var option = new Option();
option.text = right[i].innerText;
left.add(option);
right.options.remove(right[i--]);
}
}
</script>
</head>
<body>
<table width="80%" border="0" align="center" style="margin-top:80px;">
<tr>
<td align="right">
<select name="left" size="10" multiple="multiple" id="left" style="width:150px; font-size:20px">
<option>北京</option>
<option>上海</option>
<option>廣東</option>
<option>山東</option>
<option>江蘇</option>
<option>浙江</option>
</select>
</td>
<td align="center">
<p>
<input type="button" name="moveRightAll" value=">>" οnclick="moveRightAll()" />
</p>
<p>
<input type="button" name="moveRight" value=">" οnclick="moveRight()"/>
</p>
<p>
<input type="button" name="moveLeft" value="<" οnclick="moveLeft()"/>
</p>
<p>
<input type="button" name="moveLeftAll" value="<<" οnclick="moveLeftAll()"/>
</p>
</td>
<td>
<select name="right" size="10" multiple="multiple" id="right" style="width:150px; font-size:20px">
</select>
</td>
</tr>
</table>
</body>
</html>
