• 售前

  • 售后

热门帖子
入门百科

jquery实现穿梭框功能

[复制链接]
索支较 显示全部楼层 发表于 2021-10-25 19:43:51 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了jquery实现穿梭框功能的详细代码,供各人参考,详细内容如下
先上结果图

就只必要引用一个jq文件就可以
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>穿梭框</title>
  6.   <link rel="stylesheet" href="index.css" >
  7.   <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  8.   <style>
  9.    .float{
  10.     float: left;
  11.    }
  12.    .float select{
  13.     width: 300px;
  14.     border: 1px solid #ebeef5;
  15.     height: 200px;
  16.    }
  17.    .top_title{
  18.     width: 298PX;
  19.     height: 30px;
  20.     border: 1px solid #ebeef5;
  21.     border-top-left-radius: 4px;
  22.     border-top-right-radius: 4px;
  23.     line-height: 30px;
  24.     background: #fbfbfb;
  25.     display: flex;
  26.     justify-content: space-between;
  27.    }
  28.    .last_num{
  29.     margin-right: 10px;
  30.    }
  31.    .search{
  32.     width: 300px;
  33.     display: flex;
  34.     /*border: 1px solid red;*/
  35.    }
  36.    .search input{
  37.     float: left;
  38.     flex: 4;
  39.     height: 30px;
  40.     outline: none;
  41.     border: 1px solid #ebeef5;
  42.     box-sizing: border-box;
  43.     padding-left: 10px;
  44.    }
  45.    .search_button{
  46.     float: right;
  47.     flex: 1;
  48.     height: 30px;
  49.     background-color: #f1f1f1;
  50.     color: #000000;
  51.     border-style: none;
  52.     outline: none;
  53.     cursor: pointer;/*设置鼠标箭头手势*/
  54.    }
  55.    .search button i{
  56.     font-style: normal;
  57.    }
  58.    .search button:hover{
  59.     font-size: 16px;
  60.    }
  61.    .to_left,.to_right{
  62.     width: 20px;/*设置按钮宽度*/
  63.     height:20px;/*设置按钮高度*/
  64.     color:white;/*字体颜色*/
  65.     background-color:#667082;/*按钮背景颜色*/
  66.     border-radius: 100%;/*让按钮变得圆滑一点*/
  67.     border-width: 0;/*消去按钮丑的边框*/
  68.     margin: 0;
  69.     outline: none;/*取消轮廓*/
  70.     text-align: center;/*字体居中*/
  71.     cursor: pointer;/*设置鼠标箭头手势*/
  72.    }
  73.    button:hover{/*鼠标移动时的颜色变化*/
  74.     background-color: #aa9a8a;
  75.    }
  76.    .click_button{
  77. border-radius: 5px;
  78. background: #deded8;
  79. padding: 5px 0;
  80. margin: 115px 5px 0px 5px;
  81.    }
  82.   </style>
  83. </head>
  84. <body>
  85.   <div>
  86.   <div class="float">
  87.    <div class="top_title">
  88.     <div class="float_title"><label><input type="checkbox" class="left_checkbox">全选</label></div>
  89.     <div class="float_title">标题</div>
  90.     <div class="float_title last_num" ><span class="old_select_length">0</span>/<span class="old_total_length">0</span></div>
  91.    </div>
  92.    <div class="search">
  93.     <input class="old_search" type="text" placeholder="请输入..." name="" id="" value="" />
  94.    </div>
  95.    <select multiple class="old_select">
  96.     <option value="1">11111</option>
  97.     <option value="2">22222</option>
  98.     <option value="3">33333</option>
  99.     <option value="4">123</option>
  100.     <option value="5">23312</option>
  101.     <option value="6">23233</option>
  102.     <option value="7">21233</option>
  103.     <option value="8">12233</option>
  104.     <option value="9">23133</option>
  105.    </select>
  106.   </div>
  107.   <div class="float">
  108.    <div class="click_button">
  109.     <div><button class="to_left">></button></div>
  110.     <div><button class="to_right"><</button></div>
  111.   </div>
  112.   </div>
  113.   <div class="float">
  114.    <div class="top_title">
  115.     <div class="float_title"><label><input type="checkbox" class="right_checkbox">全选</label></div>
  116.     <div class="float_title">标题</div>
  117.     <div class="float_title last_num" ><span class="new_select_length">0</span>/<span class="new_total_length">0</span></div>
  118.    </div>
  119.    <div class="search">
  120.     <input class="new_search" type="text" placeholder="请输入..." name="" id="" value="" />
  121.    </div>
  122.    <select multiple class="new_select">
  123.    <option value="1">11111</option>
  124.    <option value="2">22222</option>
  125.    <option value="3">33333</option>
  126.    <option value="4">123</option>
  127.    <option value="5">233</option>
  128.    </select>
  129.   </div>
  130.   </div>
  131. <script>
  132. //右上角的数字显示“”
  133. function length_return(){
  134.   var old_total_length= $(".old_select").find('option').length;
  135.   var old_select_length= $(".old_select").find('option:selected').length;
  136.   var new_total_length= $(".new_select").find('option').length;
  137.   var new_select_length= $(".new_select").find('option:selected').length
  138.   $(".old_total_length").text(old_total_length)
  139.   $(".old_select_length").text(old_select_length)
  140.   $(".new_total_length").text(new_total_length)
  141.   $(".new_select_length").text(new_select_length)
  142.   };
  143. $(".to_left").click(function(){
  144.   var old_select= $(".old_select");
  145.   var new_select= $(".new_select");
  146.   old_select.find('option:selected').each(function () {
  147.    new_select.append(this)
  148.   })
  149.   length_return()
  150. })
  151. $(".to_right").click(function(){
  152.   var old_select= $(".old_select");
  153.   var new_select= $(".new_select");
  154.   new_select.find('option:selected').each(function () {
  155.    old_select.append(this)
  156.   })
  157.   length_return()
  158. })
  159. $(".left_checkbox").click(function(){
  160.   if($(this).is(":checked")){
  161.    $(".old_select").find('option').each(function () {
  162.     $(this).attr("selected","selected")
  163.    })
  164.   }
  165.   else{
  166.    $(".old_select").find('option').each(function () {
  167.     $(this).removeAttr("selected")
  168.     })
  169.   }
  170.   length_return()
  171. })
  172. $(".right_checkbox").click(function(){
  173.   if($(this).is(":checked")){
  174.    $(".new_select").find('option').each(function () {
  175.     $(this).attr("selected","selected")
  176.    })
  177.   }
  178.   else{
  179.    $(".new_select").find('option').each(function () {
  180.     $(this).removeAttr("selected")
  181.     })
  182.   }
  183.   length_return()
  184. })
  185. $("select").on("click","option",function(e){
  186.   if($(".left_checkbox").is(":checked"))
  187.    {
  188.     $('.left_checkbox').prop('checked', false);
  189.    }
  190.   length_return();
  191. })
  192. $("select").on("click","option",function(e){
  193.   if($(".right_checkbox").is(":checked"))
  194.    {
  195.     $('.right_checkbox').prop('checked', false);
  196.    }
  197.   length_return();
  198. })
  199. $(".old_search").on("input propertychange",function(event){
  200.   //进行查询操作
  201.   var old_select= $(".old_select");
  202.   var kw = $(this).val()
  203.   if (!kw){
  204.    old_select.find("option").show()
  205.   }
  206.   old_select.find("option").each(function(){
  207.    if($(this).text().indexOf(kw) < 0)
  208.    {
  209.     $(this).hide()
  210.    }
  211.   })
  212. })
  213.   $(".new_search").on("input propertychange" ,function(event){
  214.    var new_select=$(".new_select");
  215.    var kw=$(this).val()
  216.    if(!kw){
  217.     new_select.find("option").show();
  218.    }
  219.    new_select.find("option").each(function(){
  220.     if($(this).text().indexOf(kw)<0){
  221.      $(this).hide()
  222.     }
  223.    })
  224.   })
  225. length_return()
  226. </script>
  227. </body>
  228. </html>
复制代码
以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作