<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clear::after {
content: ".";
clear: both;
display: block;
overflow: hidden;
font-size: 0;
height: 0;
}
.singleSelect .singleSelectMask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: black;
opacity: .5;
}
.singleSelect .singleSelectContent {
position: fixed;
bottom: 0;
left: 0;
background: white;
width: 100%;
font-size: 12px;
}
.singleSelect .fr {
float: right;
}
.singleSelect .fl {
float: left;
}
.singleSelect .singleSelectButton {
padding: 10px 20px;
border-bottom: 1px solid #ededed;
}
.singleSelect .selectItem {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.selectMoreItem{
float:left;
width:30%;
height:30px;
line-height: 30px;
margin-top:5px;
text-align: center;
border: 1px solid black;
margin-left:2.5%;
}
.singleSelect .selectItemActive {
background: #81B1FF;
}
.singleSelect .selectItemCon {
height: 200px;
overflow: auto;
}
.select {
height: 40px;
width: 200px;
overflow-x: hidden;
line-height: 40px;
position: relative;
border: 1px solid black;
}
.select::after {
pointer-events: none;
position: absolute;
right: 10px;
top: 50%;
content: "";
display: block;
width: 20px;
height: 20px;
margin-top: -10px;
background: url("./arrowDown.png") no-repeat center;
background-size: contain
}
</style>
<script src="./js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="input" class="select" value="774777">9299</div>
<div id="input1" class="select" value="774777">9299</div>
<script>
 
(function ($) {
$.fn.moreSelct = function (data,fn) {
var that = $(this)
this.each(function () {
var str = '<div class="singleSelect">' +
'<div class="singleSelectMask"></div>' +
'<div class="singleSelectContent">' +
'<div class="singleSelectButton clear">' +
'<span class="fl singleCancel">取消</span>' +
'<span class="fr singleOver" style="color:#81B1FF">完成</span>' +
'</div>' +
'<div class="selectItemCon">@@@@</div>' +
'</div> ' +
'</div>';
var itemstr = ""
for (var i = 0; i < data.length; i++) {
itemstr += '<div class="selectMoreItem" value="' + data[i]["value"] + '">' + data[i]
["name"] + '</div> '
}
str = str.replace("@@@@", itemstr);
$(this).click(function () {
$("body").append(str)
if ($(this).attr("value")) {
var values=($(this).attr("value")).split(",")
console.log(values)
for(var i=0;i<values.length;i++){
$(".selectMoreItem[value=" + values[i] + "]").addClass(
"selectItemActive")
}
 
 
}
$(".selectMoreItem").click(function () {
if($(this).hasClass("selectItemActive")){
$(this).removeClass("selectItemActive")
}else{
$(this).addClass("selectItemActive")
}
 
 
})
$(".singleCancel").click(function () {
$(".singleSelect").remove()
return false
})
$(".singleOver").click(function () {
if ($(".selectItemActive").length == 0) {
$(".singleSelect").remove()
return
}
var values=[]
var htmls=[]
$(".selectItemActive").each(function(){
values.push($(this).attr("value"))
htmls.push($(this).html())
})
that.attr("value", values.join(","))
fn(values)
that.html(htmls.join(","))
$(".singleSelect").remove()
return false
})
})
});
};
})(jQuery);
$("#input").moreSelct([{
name: 999,
value: 77557779
}, {
name: 9991,
value: 7737778
}, {
name: 9299,
value: 7747777
}, {
name: 9991,
value: 7737776
}, {
name: 9299,
value: 7747775
}, {
name: 9991,
value: 7737774
}, {
name: 9299,
value: 7747773
}, {
name: 9991,
value: 7737772
}, {
name: 9299,
value: 7747771
},],function(val){
alert(val)
})
 
</script>
</body>
</html>

移动端多选插件-jquery的更多相关文章

  1. 移动端下滑刷新插件(jQuery插件)

    由于在工作不能独自开发,而且为了给他们方便,自己写过不少的插件,不过今天刚好空闲,发出刚好完成的,移动端的下滑到底刷新插件.我不是很喜欢写插件给别人用,因为用起来自然是简单的,没什么难度,所以一起分享 ...

  2. jquery的全选插件

    全选看起来挺简单的,要做得完美就不那么容易了. 目前,我的全选插件能做到以下6点: 1.点击全选checkbox,能将要选择的checkbox都选中.去掉全选按钮,能将所有的checkbox都不选.这 ...

  3. jquery 下拉多选插件

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用 Chosen 替代样式表 Bootstrap Chosen

  4. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  5. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  6. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  7. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  8. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  9. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

随机推荐

  1. Dataphin支持哪些数据源

    业务数据存储是业务系统最基本的构成,构建数据中台,就是要将这些数据集中起来放到一个有更强算力的地方集中处理,所以对于数据集成的能力是构建数据中台最基本要求: 从存储的发展历程来看,由于不同的业务场景需 ...

  2. SCP-bzoj-1068

    项目编号:bzoj-1068 项目等级:Safe 项目描述: 戳这里 特殊收容措施: 区间DP.f[l][r][s]表示l到r的子串能最小被压成的长度,其中s∈[0,1]表示该串压缩后串中是否能含有M ...

  3. tarjan求强连通+缩点——cf1248E

    这题好像是DEF里最水的,, /* 建图:如果a认识b,那么从a->b连一条边,将点分成两个集合A,B,没有从A->B的边 求出强连通分量,再造一张新图,新图中任取一个的出度为0的点作为集 ...

  4. docker组件如何协作(7)

    还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...

  5. mongo分组查询（转）

    1. 多字段分组 {"$group":{"_id": {"state": "$state", "city&qu ...

  6. PHP面试 PHP基础知识 四（流程控制）

    流程控制 PHP遍历数组的三种方式及各自的区别 三种方式:使用for循环.使用foreach循环.使用while.list().each()组合循环 区别:foe循环只能遍历索引数组,foeach可以 ...

  7. python轻松实现代码编码格式转换

    python轻松实现代码编码格式转换 最近刚换工作不久,没太多的时间去整理工作中的东西,大部分时间都在用来熟悉新公司的业务,熟悉他们的代码框架了,最主要的是还有很多新东西要学,我之前主要是做php后台 ...

  8. 命令行启动tomcat

    windows下进入CMD启动.window+r打开命令窗口具体步骤:1:在命令行中输入Tomcat安装的磁盘:E:2:进入Tomcat的主安装目录:cd Tomcat3:进入bin文件夹:cd bi ...

  9. node.js 从文件流中读写数据及管道流

    读取数据 // 引入 fs 模块 const fs = require('fs'); // 创建可读流 let readStream = fs.createReadStream('index.txt' ...

  10. 【CF886E】Maximum Element

    题目 考虑正难则反,答案即为\(n!-\text{返回值为n的排列数}\) 一个排列的返回值为\(n\),当且仅当在\(n\)出现之前没有一个数后面有连续\(k\)个小于它的数 设\(f_i\)表示\ ...