使用jQuery实现简单穿梭框方式

这篇文章主要介绍了使用jQuery实现简单穿梭框方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

jQuery实现穿梭框

项目需要，做个简单的穿梭框****效果图如下

  穿梭框    上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
上海市人民广场
 
  上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东
上海市徐泾东

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; list-style: none; } body{background-color: #e3e3e3;margin: 0px;} #shuttle_box{width:800px;zoom: 1;margin: 100px auto;} #shuttle_box:after{ content: "."; clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; } .shuttle_box_li{height: 540px;float: left;} .shuttle_box_near{width:300px;background-color:#ffffff;overflow-y: scroll;overflow-x:hidden;border-radius: 10px;} .shuttle_box_li_act{color:#ffffff !important;background-color: #1890ff !important;border-bottom: 1px solid #ffffff;transition: all .01s;} .shuttle_box_near::-webkit-scrollbar {/*滚动条整体样式*/ width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .shuttle_box_near::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 20px; background-color: rgba(0,0,0,0.5); } .shuttle_box_near::-webkit-scrollbar-track {/*滚动条里面轨道*/ background-color: rgba(0,0,0,0.2); border-radius: 20px; } .shuttle_box_near li{ padding:8px; border-bottom: 1px solid #ffffff; background-color: #f4f4f4; cursor: pointer; transition: all .5s; } .shuttle_box_li_act:hover{opacity: 0.7;transition: all .01s;} #shuttle_box_mid{width:80px;text-align: center;} #shuttle_box_mid button{ width: 50px; height:30px; display: block; margin:20px auto; line-height: 30px; color:white; cursor: pointer; background-color: #1890ff; border-radius: 5px; transition: all .5s; border:none; } #shuttle_box_mid button:hover{opacity: 0.7;transition: all .5s;} #shuttle_box_toRight{margin-top:225px !important;}

//穿梭框左侧选中 $("#shuttle_box_left").on('click', 'li', function () { if ($(this).hasClass('shuttle_box_li_act')) { $(this).removeClass('shuttle_box_li_act'); } else { $(this).addClass('shuttle_box_li_act'); } }); //穿梭框右侧选中 $("#shuttle_box_right").on('click', 'li', function () { if ($(this).hasClass('shuttle_box_li_act')) { $(this).removeClass('shuttle_box_li_act'); } else { $(this).addClass('shuttle_box_li_act'); } }); //向右移动 $("#shuttle_box_toRight").click(function () { if ($("#shuttle_box_left .shuttle_box_li_act").length == 0) return false; $("#shuttle_box_left").find('.shuttle_box_li_act').appendTo("#shuttle_box_right"); $("#shuttle_box_right li").removeClass('shuttle_box_li_act'); }); //向左移动 $("#shuttle_box_toLeft").click(function () { if ($("#shuttle_box_right .shuttle_box_li_act").length == 0) return false; $("#shuttle_box_right .shuttle_box_li_act").appendTo("#shuttle_box_left"); $("#shuttle_box_left li").removeClass('shuttle_box_li_act'); });

jQuery穿梭框，可上下左右，全选移动

HTML部分

                                                                                                                                                                                                                                                                     可选择表项                                       已选择表项

js部分

//全部向右 $('#alladd').click(function() { $('#leftselect option').remove().appendTo('#rightselect'); }); //全部向左 $('#allremove').click(function() { $('#rightselect option').remove().appendTo('#leftselect'); }); //选中向右 $('#add').click(function() { $('#leftselect option:selected').remove().appendTo('#rightselect'); }); //选中向左 $('#remove').click(function() { $('#rightselect option:selected').remove().appendTo('#leftselect'); }); //左边框双击向右移动 $('#leftselect').dblclick(function() { $("option:selected", this).remove().appendTo('#rightselect'); }); //右边框双击向右移动 $('#rightselect').dblclick(function() { $("option:selected", this).remove().appendTo('#leftselect'); }); //左边框往上移动 $('#left_up') .click( function() { var index = $('#leftselect option').index( $('#leftselect option:selected:first')); var $recent = $('#leftselect option:eq(' + (index - 1) + ')'); if (index > 0) { var $options = $('#leftselect option:selected') .remove(); setTimeout(function() { $recent.before($options) }, 10); } }); //左边框往下移动 $('#left_down') .click( function() { var index = $('#leftselect option').index( $('#leftselect option:selected:last')); var len = $('#leftselect option').length - 1; var $recent = $('#leftselect option:eq(' + (index + 1) + ')'); if (index  0) { var $options = $('#rightselect option:selected') .remove(); setTimeout(function() { $recent.before($options) }, 10); } }); //右边框往下移动 $('#right_down') .click( function() { var index = $('#rightselect option').index( $('#rightselect option:selected:last')); var len = $('#rightselect option').length - 1; var $recent = $('#rightselect option:eq(' + (index + 1) + ')'); if (index

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。

以上就是使用jQuery实现简单穿梭框方式的详细内容，更多请关注0133技术站其它相关文章！