html 左右选择框,jquery实现下拉框左右选择功能

1、说明

本文demo实现下拉框左右选择

2、代码

.centent

{

width: 260px;

}

.cententl

{

float: left;

}

.btnAdd

{

float: left;

padding:30px 5px;

}

$(function () {

//移到右边

$('#btnAdd').click(function () {

//获取选中的选项，删除自己并追加给对方

$('#select1 option:selected').appendTo('#select2');

});

//移到左边

$('#btnDel').click(function () {

//获取选中的选项，删除自己并追加给对方

$('#select2 option:selected').appendTo('#select1');

});

//全部移到右边

$('#btnAdds').click(function () {

//获取全部的选项,删除自己并追加给对方

$('#select1 option').appendTo('#select2');

});

//全部移到左边

$('#btnDels').click(function () {

//获取全部的选项,删除自己并追加给对方

$('#select2 option').appendTo('#select1');

});

//双击选项

$('#select1').dblclick(function () {

//获取双击的选项,删除自己并追加给对方

$("option:selected", this).appendTo('#select2');

});

//双击选项

$('#select2').dblclick(function () {

//获取双击的选项,删除自己并追加给对方

$("option:selected", this).appendTo('#select1');

});

});

课程1

课程2

课程3

课程4

课程5

课程6

课程7

课程8

图(1)

图(2)

图(3)

3、Demo

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！