<!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. vue static和assets的区别

    static和assets的区别,原理就在于webpack是如何处理静态资源的 assets 1)在vue组件中,所有模板和css都会被vue-html-loader和css-loader解析,并查找 ...

  2. Delphi 窗体函数GetWindowRect 取窗口矩形坐标

    GetWindowRect,用于取窗口矩形坐标.返回值类型:布尔型(LongBool).执行成功返回真(True),否则返回假(False);参数1类型:整数型(HWND),目标窗口的窗口句柄;参数2 ...

  3. DUBBO+Zookeeper在Centos7中本地搭建及小案例

    环境: 1.centos7 2.jdk-7u76-linux-x64.tar.gz 2.tomcat:apache-tomcat-7.0.59.tar.gz 3.zookeeper-3.4.6.tar ...

  4. 73 QT编程入门

    0 引言 最近开始在QT下编程,记录一下遇到的问题以及解决方法. 1 安装下载及学习资料 (1)安装下载链接 安装链接: https://blog.csdn.net/qq_23473839/artic ...

  5. thinkphp5操作redis系列教程】列表类型之lRange,lGetRange

    <?php namespace app\admin\controller; use think\cache\driver\Redis; use think\Controller; use \th ...

  6. unittest框架学习笔记三之testsuite

    # coding=utf-8 '''created :2018/3/29 author:star project: testsuite'''import unittest,time,osfrom ba ...

  7. Appium 工作原理

    Appium - automation for mobile apps   一.Appium架构介绍 官网:www.appium.io 由SauceLab公司主持.并在Google的GATC2013会 ...

  8. 1085 Perfect Sequence (25 分)

    Given a sequence of positive integers and another positive integer p. The sequence is said to be a p ...

  9. jetson nano VNC

    寻找比较好的远程桌面方式,最新系统里有写. ======================================================================= README ...

  10. 安装php 在阿里云yum源的环境

    yum -y install httpd mysql mysql-server php php-mysql postgresql postgresql-server php-postgresql ph ...