<!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. 6374. 【NOIP2019模拟2019.10.04】结界[生与死的境界]

    题目 题目大意 给你一个数列,每次可以选择任意两个相邻的数\(x\)和\(y\),将其删去,并在原来位置插入\(x+2y\). 每次询问一个区间,对这个区间进行上述操作.求最后剩下的数最大是多少. 答 ...

  2. MySql5.7默认生成的密码无法正常登陆

    1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2.重启 mysqld 服务:sys ...

  3. CSS3布局篇（多列布局）

    我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...

  4. 序列递推——cf1204E（好题）

    /* 显然用dp[i][j]来表示i个1,j个-1的结果 dp[i][j]由dp[i-1][j]和dp[i][j-1]转移而来 即dp[i][j]对应的所有序列,都可以由dp[i-1][j]在前面加一 ...

  5. MySql命令行无法显示中文

    好烦遇到了,遇到MySql命令行无法显示中文问题????? show variables like 'char%';//显示字符集 set names utf8;//设置字符集 describer t ...

  6. java IO 流小结

    java IO 流小结 java流类图结构 流的分类 按方向 输入流 输出流 按类型 字节流 字符流 结论:只要是处理纯文本数据,就优先考虑使用字符流. 除此之外都使用字节流.

  7. 【React-Native】---Android环境配置

    一.前言 本文主要内容是在Window系统下配置Android APP的开发环境,要配置RN的Android开发环境需要3个依赖 1.JDK(版本必须是 1.8) 2.Node(版本必须高于8.3) ...

  8. sip会话流程以及sip介绍（3）

    1.mtk_ims_mo_sip报文交互流程 log: 步骤1:ATD触发MO呼叫尝试步骤2:VDM选择ADS到IMS.步骤3:触发VoLTE UA来设置MO调用.步骤4:SIP信息到P-CSCF进行 ...

  9. centos7.4 系统优化

    static 表示该服务与其他服务相关联,不能单独设置该服务的启动状态 disabled 表示禁止开机启动 enabled 表示允许开机启动 auditd.service enabled autovt ...

  10. C# WinfForm 控件之dev报表 XtraReport （七）报表合并

    这个不是太难,新建两个报表 一个form窗体 窗体上放个documentView  代码如下 XtraReport2 xr2 = new XtraReport2(); xr2.CreateDocume ...