<form action="a.asp" method="post" id="theForm">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="242">
<select name="a1" id="a1" size="10" multiple="multiple">
<option value="1|课程1">课程1</option>
<option value="2|课程2">课程2</option>
<option value="3|课程3">课程3</option>
<option value="4|课程4">课程4</option>
<option value="5|课程5">课程5</option>
<option value="6|课程6">课程6</option>
<option value="7|课程7">课程7</option>
<option value="8|课程8">课程8</option>
<option value="9|课程9">课程9</option>
<option value="10|课程10">课程10</option>
</select>
</td>
<td width="120" align="center">
<input class="btn" type="button" name="Submit" id="add" value=">"><br />
<input class="btn" type="button" name="Submit2" id="del" value="<"><br />
<input class="btn" type="button" name="Submit" id="add2" value=">>"><br />
<input class="btn" type="button" name="Submit2" id="del2" value="<<"><br />
</td>
<td width="171">
<select name="a2" id="a2" size="10" multiple="multiple"></select>
</td>
<td><input type="button" value="上移" id="up" /><br /><input type="button" value="下移" id="down" /></td>
</tr>
<tr><td colspan="4"><input type="submit" value="提交" id="btn"></td></tr>
</table>
<script src="jquery.min.js"></script>
<script>
/*
jquery实现下拉框选项左右、上下、双击移动效果
来源:www.aspbc.com
作者:wangsdong
原创文章,转载请注明来源“asp编程网”,谢谢
*/
$(function(){
/*移动多个*/
$("#add").click(function(){
adds();
});
/*移动全部*/
$("#add2").click(function(){
$("#a1 option").prop("selected", 'selected');
adds();
});
/*删除多个*/
$("#del").click(function(){
dels();
});
/*删除全部*/
$("#del2").click(function(){
$("#a2 option").prop("selected", 'selected');
dels();
});
/*上移*/
$("#up").click(function(){
ups();
});
/*下移*/
$("#down").click(function(){
downs();
})
/*提交*/
$("#btn").click(function(){
if($("#a2>option").length > 0){
$("#a2 option").prop("selected", 'selected');
}else{
alert('请选择要提交的课程');
return false;
}
});
//双击功能
$("#a1").on('dblclick','option',function(){
$(this).prop("selected", 'selected');
adds();
});
$("#a2").on('dblclick','option',function(){
$(this).prop("selected", 'selected');
dels();
});
});
function adds(){
if($("#a1>option:selected").length > 0){
var optionlist = $("#a1>option:selected");
for(i=0;i<optionlist.length;i++){
v = optionlist[i].value;
t = optionlist[i].text;
str = "<option value='"+v+"' selected>"+t+"</option>";
$("#a2").append(str);
optionlist[i].remove();
}
}
else{
alert('请选择要添加的课程');
return false;
}
}
function dels(){
if($("#a2>option:selected").length > 0){
var optionlist = $("#a2>option:selected");
for(i=0;i<optionlist.length;i++){
v = optionlist[i].value;
t = optionlist[i].text;
str = "<option value='"+v+"' selected>"+t+"</option>";
$("#a1").append(str);
optionlist[i].remove();
}
}
else{
alert('请选择要删除的课程');
return false;
}
}
function ups(){
if($("#a2>option:selected").length > 0){
if($("#a2>option:selected").length == 1) {
$('#a2 option:selected').insertBefore($('#a2 option:selected').prev('option'));
}else{
alert('请选择一个课程向上移动');
return false;
}
}
else{
alert('请选择要移动的课程');
return false;
}
}
function downs(){
if($("#a2>option:selected").length > 0){
if($("#a2>option:selected").length == 1) {
$('#a2 option:selected').insertAfter($('#a2 option:selected').next('option'));
}else{
alert('请选择一个课程向下移动');
return false;
}
}
else{
alert('请选择要移动的课程');
return false;
}
}
</script>
</form>