jquery实现穿梭框功能


Posted in jQuery onJanuary 19, 2021

本文实例为大家分享了jquery实现穿梭框功能的具体代码,供大家参考,具体内容如下

先上效果图

jquery实现穿梭框功能

就只需要引用一个jq文件就可以

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>穿梭框</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;/*设置鼠标箭头手势*/
   }
   .search button i{
    font-style: normal;
   }
   .search button:hover{
    font-size: 16px;
   }
   .to_left,.to_right{
    width: 20px;/*设置按钮宽度*/
    height:20px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:#667082;/*按钮背景颜色*/
    border-radius: 100%;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/
    margin: 0;
    outline: none;/*取消轮廓*/

    text-align: center;/*字体居中*/
    cursor: pointer;/*设置鼠标箭头手势*/
   }
   button:hover{/*鼠标移动时的颜色变化*/
    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">全选</label></div>
    <div class="float_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="请输入..." 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">全选</label></div>
    <div class="float_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="请输入..." 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>
 //右上角的数字显示“”
 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){
  //进行查询操作
  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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
jQuery实现购物车全功能
Jan 11 #jQuery
jQuery实现手风琴特效
Jan 11 #jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
You might like
在PHP中执行系统外部命令
2006/10/09 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php实现倒计时效果
2015/12/19 PHP
如何打开php的gd2库
2017/02/09 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python中list循环语句用法实例
2014/11/10 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
自我鉴定思想方面
2013/10/07 职场文书
初一科学教学反思
2014/01/27 职场文书
医学求职信
2014/05/28 职场文书
计划生育诚信协议书
2014/11/02 职场文书
开学第一周总结
2015/07/16 职场文书
2022微信温控新功能上线
2022/05/09 数码科技