900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html 左右选择框 jquery实现下拉框左右选择功能

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

时间:2022-04-01 03:40:55

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。