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 ...
最新文章
- 怎样安装php52-71,CentOS如何安装PHP5和PHP7
- Java IO: RandomAccessFile
- .net httpwebrequest 并发慢_go语言并发之MPG模型
- curl 增加header_libcurl增加HTTP header 和 POST之后获取返回数据
- Spring Cloud Alibaba 新一代微服务解决方案
- IPC通信:Posix消息队列的属性设置
- 【实例解析】某水泥企业应用商业智能提升管理效率
- 高中数学建模优秀论文_高中数学建模优秀论文
- 使用vmware+centos7+openfiler搭建达梦DSC两节点集群
- Spring学习笔记(一)
- [转载]自动机器学习(AutoML)领域论文合集
- 连续9年惠及10万贫困家庭 金科“情暖万家”春节送温暖再出发
- 网站建设好但是访问不了的原因及解决方法
- Windows下的Node.js安装及环境配置
- 如何升级dart sdk以及choco不是内部或外部命令
- win10 断针测试软件,修复损坏的系统文件,就用系统文件检查器SFC,简单高效
- github问题记录:Failed to connect to github.com port 443: Timed out
- extundelete工具恢复rm -rf 删除的目录(ext4、ext3)
- statsmodels.tsa.seasonal.seasonal_decompose使用移动平均线进行季节性分解
- 关于贵旅、酒店、机场、小农等算法分析
热门文章
- 浅谈PPM (Project Portfolio Management) - 2
- 【零声教育】SDL音视频渲染实战
- Linux驱动学习--音频传输之I2S接口时序的配置
- 附下载 | IAPP《2022年隐私技术供应商报告》:两大类别入选364家厂商
- 从Powershell发送样式化HTML电子邮件(在Powershell中使用.NET DLL)
- 线性代数 第三章 向量与向量空间 知识点总结(Jeff自我感悟)
- 结对编程的好处与坏处
- STM32/51单片机实训day7——电机驱动|ULN2003A步进电机|Proteus电路设计|旋转角度控制函数|驱动函数|Keil5程序设计
- 送给博士生的20条人生建议
- 根据前序和后序遍历构造二叉树(附前序中序代码)