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实现图片上传前本地预览
Apr 28 jQuery
jQuery操作css样式
May 15 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现简易验证插件封装
Sep 13 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 GeoIP的使用教程
2011/03/09 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
vue打包相关细节整理(小结)
2018/09/28 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python中asyncore的用法实例
2014/09/29 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python中super()函数简介及用法分享
2016/07/11 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
企划专员岗位职责
2013/12/09 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
五分钟演讲稿
2014/04/30 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python