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

1、说明

本文演示实现下拉框左右选择

2、代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title style type=' text/CSS ' .centent { width: 260px}。cententl { float:左侧；} .btnAdd { float:左侧；padd :30 px 5px }/style script src=' http : script/jquery。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){//移到右边$('#btnAdd ').单击(函数(){ //获取选中的选项，删除自己并追加给对方$(' #选择1个选项：已选择').appendo(' # select 2 ')；});//移到左边$('#btnDel ').单击(函数(){ //获取选中的选项，删除自己并追加给对方$(' #选择2个选项：已选择').appendo(' # select 1 ')；});//全部移到右边$('#btnAdds ').单击(函数(){ //获取全部的选项，删除自己并追加给对方$('#select1选项').appendo(' # select 2 ')；});//全部移到左边$('#btnDels ').单击(函数(){ //获取全部的选项，删除自己并追加给对方$('#select2选项').appendo(' # select 1 ')；});//双击选项$('#select1 ').dblclick(function () { //获取双击的选项，删除自己并追加给对方$('option:selected '，this).appendo(' # select 2 ')；});//双击选项$('#select2 ').dblclick(function () { //获取双击的选项，删除自己并追加给对方$('option:selected '，this).appendo(' # select 1 ')；});});/script/head body div class=' centet ' div class=' centet l ' select multiple=' multiple ' id=' select 1 ' style=' width : 100px；'高度： 160像素选项值='1 '课程1/选项选项值='2 '课程2/选项选项值='3 '课程3/选项选项值='4 '课程4/选项选项值='5 '课程5/选项选项值='6 '课程6/选项选项值='7 '课程7/选项选项值='8 '课程8/option/select/div class=' btnAdd ' input type=' button ' id=' btnAdd ' value=' '/br/input type=' button ' id=' btnDel ' value=' '/br/input type=' button ' id=' '/br/input type=' button ' id=' btnDels ' value=' '/div select multiple=' multiple ' id=' select 2 ' style=' width : 100 px；height : 160 px '/select/div/div/body/html(9500 . 163.com)

图(1)

图(2)

图(3)

3、演示

点击下载

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