Select2 的简单使用
2019独角兽企业重金招聘Python工程师标准>>>
前段时间 公司要求将项目中的下拉框度做修改,为了满足公司的要去,我最终找到了select2 这个js插件;
1. select2 下载地址 http://ivaynberg.github.io/select2/
2. 下载完成后 自己新建一个文件夹 将所需要的 select2中的资源复制出来;
css文件:select2.css
js文件:select2.js/select2.min.js jquery-1.11.1.min.js【自己下载的】,select2_locale_zh-CN.js【语言js】
css中的图片:select2.png select2-spinner.gif select2x2.png
注意:
css中引用图片的位置为当前目录,所以css的图片最好和css文件同级,若不行你则需要去修改 css文件;
select2.js 是借助于 jquery.js 进行开发的所以在引入 select.js之前要引入jquery.js 最好版本高点,我用的是1.11
3.新建一个html 并引入相应的js和css
<link rel="stylesheet" type="text/css" href="./select2.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./select2.js"></script>
<script type="text/javascript" src="./select2_locale_zh-CN.js"></script>
4.简单使用:
本人建议的使用方法为:
$("#"+id).select2({ id:'dm', //可选参数,若你的data中没有一个 名字为 ‘id’的字段那你就需要在这儿设置 就是<option>中valuedata:{ results: data, text: function(item) { return item.mc; } }, formatSelection: format, formatResult: format
});
function format(item){return item.mc;//可以写 item所拥有的字段或者多个字段组合
}
若你的数据为固定数据基本不会发生变化,比如国家,地区等,那么我建议你将数据查出来放到一个array中,这样查询速度和条件查询度是比较快的,若你的数据需要通过ajax请求,那么请参考官网,也需要主要注意一下id这个参数,若有问题我们可以一起探讨。
5. 关于下拉框层级的问题:
1.若你使用了 layer.js 这个弹出框插件,那么你在弹出页面中使用 select2 会发现下拉框无法显示?
解决方法:这个可能造成的原因是 select2的层级不够,到select.css中找到3个z-index,并根据他们现有的层级关系,适当的增加 z-index的值;
修改前的:
.select2-drop-mask {......z-index: 9998;......
}.select2-drop {.......z-index: 9999;.........
}
.select2-search {.....z-index: 10000;.......
}
我根据我需要修改成
.select2-drop-mask {......z-index: 19911124;......
}.select2-drop {.......z-index: 19999999;.........
}
.select2-search {.....z-index: 19911126;.......
}
在本次项目中我主要遇到的两个问题就是:
z-index
一个 id,若id不正确会造成 下拉框中的内容无法选中
谢谢大家阅读这篇文章,若有更好更多的使用心得或者问题,请在文章下方留言,或者加 983561865 咱们畅聊
转载于:https://my.oschina.net/shichangcheng/blog/350275
Select2 的简单使用相关推荐
- select2的简单使用
因为项目中需要关联用户,且数据比较多,为了便捷操作,以及防止重名,需要能搜索的下拉框,使用了select2来完成这个功能.使用select2的方式与问题 引入 <link href=" ...
- select2 属性标签整理
前言:由于自己感觉自己学的越来越杂,很多东西使用之后就忘掉了很大一部分,所以最近决定把自己学的东西通过博客的方式整理出来,看能不能把这些知识都串通起来 SELECT2 标签 简单的关于以下API地址的 ...
- 使用select2实现多功能下拉框,select2中文api
最近项目中有个需求是商品能够选择多个标签,类似jire中选择标签: 能把选择后选项显示在输入框中,删除时连同整个标签一起删.经过网上咨询.请教同事后,得到一致意见是使用select2. 下面是使用se ...
- flask-wtf优雅实现下拉多选框
flask-wtf实现下拉多选框 一般实现 一般情况下,我们用flask-wtf来实现下拉多选框的时候,大概是这样子操作的 定义Form类 forms.py from flask_wtf import ...
- Select2 鼠标点击空白处不消失简单测试和解决方法
新版本4.xx的select2有个bug,点击选择框下方 的空白不消失.查看源码,原来需要: body{height:100%} 转载于:https://www.cnblogs.com/beiming ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery:<script type="text/javascript" src="http://cdn.bootcss.com/ ...
- Jquery中使用select2插件实现ajax实时请求数据
场景 效果 select2相关 select2官网: https://select2.org/ 实现 引入select2 页面中需要引入select.full.min.js和select2.min.c ...
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- bootstrap select2 php,JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的 ...
最新文章
- SQL2000 好书 《SQL Server 2000数据库管理与开发技术大全》----求是科技 人民邮电出版社
- 进程调度(第三章 处理调度与死锁)
- 隐马尔可夫模型:HMM
- zoj3381 Osaisen Choudai!
- c#在WinForm中重写ProgressBar控件(带%的显示)
- getParentalNodePaths、osg::NodePathList、osg::NodePath详解
- GlassFish 4带来了Java EE 7
- Teamcenter - Index search 找不到相关物件的解决方法
- python访问字符串中的部分字符的操作_python中字符串的常见操作方法
- 啊金学习javascript系列一之javascript整体印象
- Python 数据结构与算法——插入排序(insertion sort)
- QQ浏览器文章评论的BUG:评论者错了
- 音视频处理入门基础知识(一)
- 连虚拟机mysql_实体机连虚拟机MYSQL联接不上
- [导入]中国车牌号的识别
- 计算机裸机的功能,计算机中裸机是指什么
- spoj 1811 LCS 后缀自动机
- 如何给单片机烧录程序?
- MFRC53101TOFE小知识
- python 画图marker标记汇总(matplotlib.pyplot)
热门文章
- glog 报错解决: /bin/bash: aclocal-1.14: command not found
- php邮箱群发,php异步群发邮件
- 【RocketMQ工作原理】消息的存储
- 4.Spring Security 添加图形验证码
- javascript中对象在OOP方面的一些知识(主要是prototype和__proto__相关)
- python的动态性以及 使用__slots__
- Selenium如何通过location和size定位元素坐标?
- sql mysql 删除数据库_在sql中将已建数据库删除的详细步骤
- 右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头?
- Wamp与IIS同时在Windows7下运行解决方法