jQuery realizes the shuttle box function

This article example shares the specific code of jQuery to realize the shuttle box function for your reference. The specific content is as follows

First the effect picture

You just need to reference a jq file

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Shuttle Box</title>
  <link rel="stylesheet" href="index.css" >
  <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  <style>
   .float{
    float: left;
   }

   .float select{
    width: 300px;
    border: 1px solid #ebeef5;
    height: 200px;
   }
   .top_title{
    width: 298px;
    height: 30px;
    border: 1px solid #ebeef5;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    line-height: 30px;
    background: #fbfbfb;
    display: flex;
    justify-content: space-between;
   }
   .last_num{
    margin-right: 10px;
   }

   .search{
    width: 300px;

    display: flex;
    /*border: 1px solid red;*/
   }
   .search input{
    float: left;
    flex: 4;
    height: 30px;
    outline: none;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    padding-left: 10px;
   }
   .search_button{
    float: right;
    flex: 1;
    height: 30px;
    background-color: #f1f1f1;
    color: #000000;
    border-style: none;
    outline: none;
    cursor: pointer;/*Set the mouse arrow gesture*/
   }
   .search button i{
    font-style: normal;
   }
   .search button:hover{
    font-size: 16px;
   }
   .to_left,.to_right{
    width: 20px;/*Set button width*/
    height:20px;/*Set button height*/
    color:white;/*font color*/
    background-color:#667082;/*Button background color*/
    border-radius: 100%;/*Make the button smoother*/
    border-width: 0;/*eliminate the ugly border of the button*/
    margin: 0;
    outline: none;/*Cancel outline*/

    text-align: center;/*font center*/
    cursor: pointer;/*Set the mouse arrow gesture*/
   }
   button:hover{/*Color changes when the mouse moves*/
    background-color: #aa9a8a;
   }
   .click_button{

 border-radius: 5px;
 background: #deded8;
 padding: 5px 0;
 margin: 115px 5px 0px 5px;
   }

  </style>
 </head>

 <body>
  <div>
  <div class="float">
   <div class="top_title">
    <div class="float_title"><label><input type="checkbox" class="left_checkbox">Select All</label></div>
    <div class="float_title">Title</div>
    <div class="float_title last_num" ><span class="old_select_length">0</span>/<span class="old_total_length">0</span></div>
   </div>
   <div class="search">
    <input class="old_search" type="text" placeholder="Please enter..." name="" id="" value="" />

   </div>

   <select multiple class="old_select">
    <option value="1">11111</option>
    <option value="2">22222</option>
    <option value="3">33333</option>
    <option value="4">123</option>
    <option value="5">23312</option>
    <option value="6">23233</option>
    <option value="7">21233</option>
    <option value="8">12233</option>
    <option value="9">23133</option>

   </select>
  </div>

  <div class="float">
   <div class="click_button">
    <div><button class="to_left">></button></div>
    <div><button class="to_right"><</button></div>
  </div>

  </div>
  <div class="float">
   <div class="top_title">
    <div class="float_title"><label><input type="checkbox" class="right_checkbox">Select All</label></div>
    <div class="float_title">Title</div>
    <div class="float_title last_num" ><span class="new_select_length">0</span>/<span class="new_total_length">0</span></div>
   </div>
   <div class="search">
    <input class="new_search" type="text" placeholder="Please enter..." name="" id="" value="" />

   </div>

   <select multiple class="new_select">
   <option value="1">11111</option>
   <option value="2">22222</option>
   <option value="3">33333</option>
   <option value="4">123</option>
   <option value="5">233</option>

   </select>
  </div>
  </div>
<script>
 //The number in the upper right corner displays ""
 function length_return(){
  var old_total_length= $(".old_select").find('option').length;
  var old_select_length = $(".old_select").find('option:selected').length;
  var new_total_length= $(".new_select").find('option').length;
  var new_select_length = $(".new_select").find('option:selected').length
  $(".old_total_length").text(old_total_length)
  $(".old_select_length").text(old_select_length)
  $(".new_total_length").text(new_total_length)
  $(".new_select_length").text(new_select_length)
  };

 $(".to_left").click(function(){
  var old_select = $(".old_select");
  var new_select = $(".new_select");
  old_select.find('option:selected').each(function () {
   new_select.append(this)
  })
  length_return()
 })

 $(".to_right").click(function(){
  var old_select = $(".old_select");
  var new_select = $(".new_select");
  new_select.find('option:selected').each(function () {
   old_select.append(this)
  })
  length_return()
 })

 $(".left_checkbox").click(function(){
  if($(this).is(":checked")){
   $(".old_select").find('option').each(function () {
    $(this).attr("selected","selected")
   })
  }
  else{
   $(".old_select").find('option').each(function () {
    $(this).removeAttr("selected")
    })
  }
  length_return()
 })

 $(".right_checkbox").click(function(){
  if($(this).is(":checked")){
   $(".new_select").find('option').each(function () {
    $(this).attr("selected","selected")
   })
  }
  else{
   $(".new_select").find('option').each(function () {
    $(this).removeAttr("selected")
    })
  }
  length_return()
 })
 $("select").on("click","option",function(e){
  if($(".left_checkbox").is(":checked"))
   {
    $('.left_checkbox').prop('checked', false);
   }
  length_return();

 })

 $("select").on("click","option",function(e){
  if($(".right_checkbox").is(":checked"))
   {
    $('.right_checkbox').prop('checked', false);
   }
  length_return();

 })

 $(".old_search").on("input propertychange",function(event){
  //Perform query operation var old_select = $(".old_select");
  var kw = $(this).val()
  if (!kw){
   old_select.find("option").show()
  }
  old_select.find("option").each(function(){
   if($(this).text().indexOf(kw) < 0)
   {
    $(this).hide()
   }
  })

 })
  $(".new_search").on("input propertychange" ,function(event){
   var new_select=$(".new_select");
   var kw = $(this).val()
   if(!kw){
    new_select.find("option").show();

   }
   new_select.find("option").each(function(){
    if($(this).text().indexOf(kw)<0){
     $(this).hide()
    }
   })
  })
 length_return()
</script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: