<!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. 高性能js之js文件的加载与解析

    随着网站的发展,现在的网页已经离不开js,经常一个页面会引入大量的js.那么该如何合理的加载这些js? head标签中引入js文件可能是最常见的一种方式,但是这样会造成一个问题.因为j可以说是浏览器中 ...

  2. 【leetcode】965. Univalued Binary Tree

    题目如下: A binary tree is univalued if every node in the tree has the same value. Return true if and on ...

  3. 使用cordova network-information 插件监听手机网络状态

    在使用html5配合cordova做webapp时,有时需要实时监测手机的网络 状况.html5里面是没有相关的js的,这时就需要在cordova里找相关插件了. 一.插件查找 1.在cordova中 ...

  4. 6374. 【NOIP2019模拟2019.10.04】结界[生与死的境界]

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

  5. 【JZOJ6434】【luoguP5665】【CSP-S2019】划分

    description analysis 首先有一个结论,对于\([1,i]\)区间划分最后一段的和尽量小,答案会更优,具体证明参考毛爷爷的博客 设\(f[i]\)为满足\([1,i]\)划分最优时. ...

  6. Unity Document

    { https://docs.unity3d.com/ScriptReference/Events.UnityEventTools.html }

  7. echarts更新数据的方法

    //初始创建 var myChart = echarts.init(document.getElementById('main')); var option = {........} myChart. ...

  8. shell 生成多级目录遇到最后一级目录乱码 mkdir -p a/b/c/d

    使用shell完成从配置文件中获取路径(字符匹配),在生成多级路径的过程过遇到最后一级目录乱码. 代码如下: mkdir -p $path 这个$path是从配置文件中读取. 如何解决: 1.检查是否 ...

  9. JUC源码分析-线程池篇（二）FutureTask

    JUC源码分析-线程池篇(二)FutureTask JDK5 之后提供了 Callable 和 Future 接口,通过它们就可以在任务执行完毕之后得到任务的执行结果.本文从源代码角度分析下具体的实现 ...

  10. <软件测试>软件测试

    1.软件测试基础 软件测试工程师:查找错误和缺陷,然后要求开发人员进行修改,保证软件质量. 漏洞(360安全漏洞):硬件,软件,协议的具体实现或系统安全策略存在缺陷,从而可以使攻击者在未授权的情况下破 ...