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>

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

(0)

相关推荐

  • jQuery实现穿梭框效果

    本文实例为大家分享了jQuery实现穿梭框效果的具体代码,供大家参考,具体内容如下 简介:今天给大家带来穿梭框的实现 布局的实现 <div id="box"> <div id="boxleft"> <ul id="left_ul"> </ul> </div> <div id="boxbtn"> <button id="btn_right&q

  • jquery实现穿梭框功能

    本文实例为大家分享了jquery实现穿梭框功能的具体代码,供大家参考,具体内容如下 先上效果图 就只需要引用一个jq文件就可以 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css" > <s

  • jquery实现搜索框功能实例详解

    搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&

  • Vue 实现穿梭框功能的详细代码

    Vue - 实现穿梭框功能,效果图如下所示: css .transfer{ display: flex; justify-content: center; align-items: center; } .transfer>.list { width: 200px; height: 300px; border: 1px solid #000; list-style: none; } .content{ font-size: 30px; margin: 0 20px; } .list>li{ pa

  • Vue实现拖拽穿梭框功能四种方式实例详解

    目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;

  • 简单实现jQuery多选框功能

    Jquery多选框的基本操作:支持全选.反选.取消全选的功能 HTML正文: <input type="checkbox" id="c1">全选/全不选<br> 兴趣爱好:<br> <input type="checkbox" name="interst" value="basketball">篮球 <input type="checkbox&

  • jQuery实现下拉框功能实例代码

    说一百句,不如我给大家贴张效果图,效果图请看下面: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { m

  • jquery实现下拉框功能效果【实例代码】

    说不清楚,直接上图 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; paddin

  • jQuery模拟12306城市选择框功能简单实现方法示例

    本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net jQuery城市选择框</title> <style> #parent{ width:500px; position:relative; } #text{ height:25px; } #select{ width:420px; hei

  • 基于jQuery实现文本框只能输入数字(小数、整数)

    在实际应用中,文本框中有时候只能够允许输入整数,但是有时候可能更为"博爱"一点,可以允许输入浮点数,下面就通过实例代码介绍一下如何利用jquery实现文本框只能输入小数,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/

随机推荐