Html页面
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" rowspan="4">
<select id="colname1 " name="colname1 " οndblclick="JavaScript:Add('colname1','colname2','colname')"></select>
</td>
<td width="15%"></td>
<td width="35%" rowspan="4" id="colnameDiv">
<select id="colname2 " name="colname2 " οndblclick="JavaScript:Remove('colname1','colname2','colname')"></select>
</td>
<td width="20%"></td>
</tr>
<tr>
<td width="90" align="center">
<input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" >
</td>
<td width="120" align="center">
<input name="doup" type="button" value="向上" onClick="upcol()" >
</td>
</tr>
<tr>
<td width="90" align="center">
<input name="DoDelb" type="button" value="<<" onClick="JavaScript:Remove()">
</td>
<td width="120" align="center">
<input name="dodown" type="button" value="向下" onClick="downcol()" >
</td>
</tr>
<tr><td width="73">
</td></tr>
</table>
Js写法:
function Add() {$("#colname1 option:selected").appendTo($("#colname2"));
}
function Remove() {
$("#colname2 option:selected").appendTo($("#colname1"));
}
function upcol() {
//获取选中的右侧option元素
var rightcol = $("#colname2 option:selected");
//option的第一个元素无法上移,rightcol.get(0)表示选中的option对象,rightcol.get(0).index表示option对象的位置索引,从0开始
if(rightcol.get(0).index!=0){
rightcol.each(function(){
$(this).prev().before($(this)); //在当前选中对象的前面插入该对象
//$(this).insertBefore($(this).prev());//等同于
});
}
}
function downcol() {
//选择所有的对象
var allrightcol = $("#colname2 option");
//选择被选中的对象
var rightcol = $("#colname2 option:selected");
//option的最后一个元素无法下移
if(rightcol.get(rightcol.length-1).index!=allrightcol.length-1){
//循环选中的对象
for(i=rightcol.length-1;i>=0;i--){
//获取选中的对象
var item = $(rightcol.get(i));
item.insertAfter(item.next()); //将选中的对象插入到下一个对象的后面
//item.next().after(item);//等同于
}
}
}