js穿梭框 实现_jquery实现穿梭框功能
本文实例为大家分享了jquery实现穿梭框功能的具体代码,供大家参考,具体内容如下
先上效果图
就只需要引用一个jq文件就可以
穿梭框
.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;
}
11111
22222
33333
123
23312
23233
21233
12233
23133
11111
22222
33333
123
233
//右上角的数字显示“”
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()
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持云海天教程。
js穿梭框 实现_jquery实现穿梭框功能相关推荐
- python获取文本框内容_jquery获取文本框的内容
使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript function getUserName(){ var username= $("# ...
- php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐),一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
- php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下 本文实例讲述了JS简单获取并修改in ...
- vue 进入首页只弹一个弹框_vue.js实现只弹一次弹框
核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中. Lorem ipsum dolor sit amet, consectetur adipisicing elit ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ========================//弹出对话框并输出一段提示信息functio ...
- html css好看的提示框,div对话框,js+div+css实现好看的提示框效果(转)
div对话框,js+div+css实现好看的提示框效果(转) (2012-02-18 20:46:23) 标签: html div css 杂谈 提示窗都越来越人性化了,呵呵,有的时候老板就和你要那么 ...
- html 原生弹出框,html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消 确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
- html怎么写点击后弹出提示框 是否确认,基于JS+HTML实现弹窗提示是否确认提交功能...
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下 分析:这里面要,引入三个库文件,如下是下载地址 代码:下载后放入响应的项目目录,最后代码如下 console.log(1) ...
- js插件chosen-select后台交互下拉框选择
js插件chosen-select后台交互下拉框选择 $('.chosen-select').chosen(); $(".chosen-search input").bind(&q ...
最新文章
- 元宇宙大热后将陷低潮, 虚实互联网更准确, 2030前后才可能全面热启
- 批量导出表数据到CSV文件
- python考证书-python能考证么
- Linux之后台运行(nohup和)
- js内存泄漏常见的四种情况(From LeuisKen)
- java多线程之CountDownLatch倒数闸门
- Raft与MongoDB复制集协议比较
- centos8搭建glusterfs服务
- 纯js分页代码(简洁实用)
- 一个留美女博士的七年
- 相关性和显著性检验学习笔记
- 最有效地戒掉晚睡强迫症(熬夜强迫症、假象失眠症等等)
- 在阿里云用python发送邮件
- Pytorch 模型 查看网络参数的梯度以及参数更新是否正确,优化器学习率设置固定的学习率,分层设置学习率
- 微信小程序点击图片预览真机无法显示的问题
- WebRTC 报错:Failed to set remote offer sdp: Called with SDP without DTLS fingerprint
- 开源激光SLAM项目BLAM-----1
- 人工智能如何改善运输和物流
- E+H超声波液位计变送器维修FMU90-R11CA111AA3A
- eclipse设置代码格式化(详解)
热门文章
- js 定义未知长度的二维数组
- python psutil.disk_Python psutil.disk_partitions方法代碼示例
- RPKM 的解释、计算
- Excel计算某一单元格以上所有数据的和
- MongoDB的C语言编程实例
- 机器学习线性代数基础
- MySQL数据库常用图形化操作界面——Navicat的安装与使用教程详解
- uln2003资料,ULN2003中文资料详解
- Winform 利用ThoughtWorks.QRCode 生成二维码,并另存为二维码图片(限制大小)
- 软件测试之测试人员的分工