js设计一交换式选单

______         ______
| a1 |         | b1 |
| a2 |   >>    | b2 |
| a3 |   >>    | b3 |
| a4 |         | b4 |
|____|         |____|
>>是按钮
所选取的项目应可列在右方。(按按钮或鼠标点清单项目两下)
加入右方选单后将左方选项清除。
设计一个刪除钮可将选项刪除。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

______        ______
| a1 |        | b1 |
| a2 |  >>    | b2 |
| a3 |  <<    | b3 |
| a4 |        | b4 |
|____|        |____|
<<也是按钮
______        ______
| a1 |        | b1 |
| a2 |  >>    | b2 |
| a3 |  <<    | b3 |
| a4 |        | b4 |
|____|        |____|
<<也是按钮
<html>
<head>
<script type="text/javascript">
function move(from, to)
{
var f = document.forms[0];
if(from.selectedIndex==-1) return;
for(var i=from.options.length-1;i>=0;i--){
var op = from.options[i];
if(op.selected){
to.options.add(new Option(op.text, op.value));
from.options.remove(i);
}
}
}
</script>
<form>
<table>
<tr>
<td>
<select name="sel1" size="10" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<input type="button" value=">>" onclick="move(this.form.sel1, this.form.sel2);"><br>
<input type="button" value="<<" onclick="move(this.form.sel2, this.form.sel1);"><br>
</td>
<td>
<select name="sel2" size="10" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr></table>
</form>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Loan Calculator</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=BIG5"> 
</head> <body>
<script type="text/javascript">
function move(from, to)
{
    var f = document.forms[0];
    if(from.selectedIndex==-1) return;
    for(var i=from.options.length-1;i>=0;i--){
        var op = from.options[i];
        if(op.selected){
            to.options.add(new Option(op.text, op.value));
            from.options.remove(i);
        }
    }
}
</script>
<form>
<table>
<tr>
<td>
<select name="sel1" size="10" multiple onDblClick="move(this.form.sel1, this.form.sel2);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
<td>
<input type="button" value=">>" onclick="move(this.form.sel1, this.form.sel2);"><br>
<input type="button" value="<<" onclick="move(this.form.sel2, this.form.sel1);"><br>
</td>
<td>
<select name="sel2" size="10" multiple onDblClick="move(this.form.sel2, this.form.sel1);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr></table>
</form>
</body>
</html>
from.options.remove(i);
remove这个函数之前不知道，手动在那后面退到前面，郁闷