When to useMove elements between the two columns in an intuitive way to complete the selection behavior. After selecting one or more options, click the corresponding arrow key to move the selected options to another column. The left column is Without further ado, let’s get to the code. Structural branchesCode
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Double column shuttle selection box</title> <link rel="stylesheet" href="css/dS.css" rel="external nofollow" > <script src="js/jquery.min.js"></script> <style> body { /*background:#000c3b;*/ } </style> </head> <body> <div style="margin:40px;"> <ul id="shuttle_box"> <li class="shuttle_box_li shuttle_box_near"> <ul id="shuttle_box_left"> <li class="outside">Li Bai <input type="date" class="inside" style="width:150px;"/> </li> <li class="outside">Su Shi <input type="date" class="inside" style="width:150px;"/> </li> <li class="outside">Wang Anshi <input type="date" class="inside" style="width:150px;"/> </li> <li class="outside">Li Shangyin <input type="date" class="inside" style="width:150px;"/> </li> </ul> </li> <li class="shuttle_box_li" id="shuttle_box_mid"> <button id="shuttle_box_toRight">>></button> <button id="shuttle_box_toLeft"><< </button> </li> <li class="shuttle_box_li shuttle_box_near"> <ul id="shuttle_box_right"> <li>Wang Wei <input type="date" class="inside" style="width:150px;"/> </li> </ul> </li> </ul> </div> <script src="js/ds.js"></script> </body> </html>
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:700px;zoom: 1;margin: 0px 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;border:5px solid #f4f4f4} .shuttle_box_li_act{color:#ffffff !important;background-color: #009688 !important;border-bottom: 1px solid #ffffff;transition: all .01s;} .shuttle_box_near::-webkit-scrollbar {/*Overall scrollbar style*/ width: 6px; /*The height and width correspond to the size of the horizontal and vertical scroll bars respectively*/ height: 1px; } .shuttle_box_near::-webkit-scrollbar-thumb {/*Small square inside the scroll bar*/ border-radius: 20px; background-color: rgba(0,0,0,0.5); } .shuttle_box_near::-webkit-scrollbar-track {/*track inside the scroll bar*/ 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: #009688; 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;}
$(document).ready(function() { //Select the left side of the shuttle box$("#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'); } }); //Click event to select internal event $(".inside").bind('click', function(event1) { event1.stopPropagation(); }); }); //Select the right side of the shuttle box$("#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'); } }); //Move right$("#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'); }); //Move left$("#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'); }); Operation Results This is the end of this article about the implementation example of JS native double-column shuttle selection box. For more relevant JS double-column shuttle selection box content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of common Docker commands
>>: Analysis of the difference between HTML relative path and absolute path
What should I do if Linux does not support all co...
Table of contents 1. Scope 2. Function return val...
Preface When using RabbitMQ, if there is no traff...
In this chapter, we will start to operate redis i...
A list is defined as a form of text or chart that...
MySQL 8.0 for Windows v8.0.11 official free versi...
<br />How can I remove the scroll bar on the...
Flash file formats: .FLV and .SWF There are two ex...
File transfer between Windows and Linux (1) Use W...
Table of contents Basic concepts of components Th...
Table of contents Preface Create a bridge network...
Why optimize: With the launch of the actual proje...
Beautiful code is the foundation of a beautiful we...
HTML provides five space entities with different ...
In the web pages we make, if we want more people ...