<!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. shell编程基础干货

    变量及赋值 设置变量   A=‘china’  取消变量  unset  A    加上 export 关键字  代表全局变量 a=$(ls -l /root/bin)   ##运行里面的命令,并把结 ...

  2. 1245. Tree Diameter

    解题思路:本题是一道图的题目,但是无向图,给定的输入是图的各个边,题目中给出一个关键信息(Each node has labels in the set {0, 1, ..., edges.lengt ...

  3. spring boot基于DRUID数据源密码加密及数据源监控实现

    前言 随着需求和技术的日益革新,spring boot框架是越来越流行,她也越来越多地出现在我们的项目中,当然最主要的原因还是因为spring boot构建项目实在是太爽了,构建方便,开发简单,而且效 ...

  4. Arduino与无源蜂鸣器

    1.Arduino无源蜂鸣器传感器模块 我们可以使用Arduino进行很多互动作品,其中最常用的是声光显示器.之前的所有实验都与LED有关.但是,这个实验中的电路可以产生声音.通常,实验是通过蜂鸣器或 ...

  5. java 原生 HttpClient

    package org.rx.socks.http; import com.google.common.base.Strings; import lombok.SneakyThrows; import ...

  6. CSS：CSS padding（填充）

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...

  7. docker IPv4 forwarding is disabled. 解决方法

    问题 最近在 docker 部署 django 项目打包镜像时遇到 [root@localhost ~]# docker build -t test1 . ...省略... WARNING: IPv4 ...

  8. sql server 2008 数据库数据类型

    sql server 2008 数据库数据类型 一.数值型 int:整数类型,它的精度由执行机构确定.. smallint:短整数类型,它的精度由执行机构确定.. numeric(p,s):数值型,并 ...

  9. Airbnb React/JSX 编码规范

    Airbnb React/JSX 编码规范 算是最合理的React/JSX编码规范之一了 内容目录 基本规范 Class vs React.createClass vs stateless 命名 声明 ...

  10. （转载）理解和使用Promise.all和Promise.race

    声明:本文转载自:https://www.jianshu.com/p/7e60fc1be1b2 一.Pomise.all的使用 Promise.all可以将多个Promise实例包装成一个新的Prom ...