select2 使用 - 相关文章

利用Select2优化@Html.ListBoxFor显示，学会用MultiSelectList

最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多选框的操作方法: 一.定义一个MultipleSelectModel public class MultipleSelectModel { public int[] MultipleItem { get; set; } } 二.在Controller中实例化MultiSelectList publi…

ajax获取json数据 for select2

json数据“a.json” [ { "id": "1", "text": "张三" }, { "id": "2", "text": "李师师" }, { "id": "3", "text": "林冲" }, { "id": "4"…

select2 demo

https://select2.github.io/examples.html 一大堆的坑: 1. 不同版本之间貌似不兼容,对应版本看对应的文档. 2. 4.0.3版本: 1). 自定义渲染的option无法选中.谷歌了下,似乎返回的对象必需有 id和text属性, 另外可以加一个属性,指向对象本身.即: ajax的processResults回调中: processResults: function (data, params) { params.page = params.page || 1…

解决select2在bootstrap的modal中默认不显示的问题

在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: <style> /*select2在Bootstrap的modal中默认被遮盖,现在强制显示在最前*/ .select2-drop { z-index: 10050 !important; } .select2-search-choice-close { margin-top: 0 !import…

select2 清空数据

最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', null);…

select2插件不兼容ie7，ie7下样子显示错位问题

1.源文件(未修改) select2.min.css.select2.min.js 2.ie7下显示样式: 3.ie8下显示样式: 4.经查看发现ie7下对一些属性的解析和ie8不同,需对ie7另作hack 在css样式文件中加入: *+html .select2-search--dropdown .select2-search__field{width:91%;}*+html .select2-container{margin-top: -3px;} 在js文件中加入: if(navigato…

select2的相关问题

在弹出框中无法使用select2的问题: 通常情况下,使用select2只需要在加载相关js和css后,添加如下代码即可: $("#selectId").select2(); 但如果这个select在弹出框中,这样使用往往是无效的,这时候需要这样写: $.fn.modal.Constructor.prototype.enforceFocus = function () {$("#selectId").select2(); }; 参考https://github.co…

bootstrap与Select2使用小结

这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.github.io/examples.html .http://select2.github.io/select2/ 2.Select2参数文档说明:https://select2.github.io/options.html 3.Select2源码:https://github.com/select2/s…

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法通过Google搜索,发现sele…

JS组件系列——Bootstrap Select2组件使用小结

前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到select里面随着文字一起显示).前两天做一个菜单图标选择的功能,就要用到这个图文选择的功能.于是乎又是找啊找.终于不负所望,找到了我们伟大的select2组件.今天分享下这个组件的一些用法和特性. 一.组件说明以及API说明 Select2使用示例地址:https://select2.githu…

Select2个人使用总结

最近项目有功能需要使用列表选多个用户,老夫偷懒使用zTree进行了多级checktree实现,不过貌似太丑,虽然对于我这种后端来说无所谓,但强迫症还是让我寻找其他代替控件. 闲话不说了,先上Select2自己的使用配置. Html页面代码: <div class="form-group" style="width: 200px;"> <label for="sel_menu" style="width: 200px;&…

jquery.select2 模糊查询

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/bootstrap…

select2插件

引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script…

select2初始化默认值

之前用select2初始化默认值使用了select2('val','1'),这样做没问题,但只能用在单选上,多选的话,即使将val后面的值改成数组['0', '2']这种形式也没用. <script type="text/javascript"> $(document).ready(function() { var data = [{ id: 0, text: 'aaa' }, { id: 1, text: 'bbb' }, { id: 2, text: 'ccc' }];…

基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:http…

bootstrap模态框和select2合用时input无法获取焦点

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1" 删掉: <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabe…

select2搜索框查询加遍历

<div class="form-group"> <label class="control-label col-sm-1 no-padding-right" for="entId">公司名称</label> <div class="col-sm-10"> <div class="clearfix"> <select class="…

select2

.select2-container .select2-choice { height: 34px; line-height: 34px; } .自定义组件高度在css 里面设置 .select2-container .select2-choice { height: 34px; line-height: 34px; } .自定义宽度和监听 change事件(coffeescript语法) $('#time_scope_scope_id').select2({'width':'200px…

select2插件的使用

<select id="prd_tech_for_load" class="selectable" style="width:180px;"> </select> 不需要分页时,直接在select内添加option列表如果要分页的话 $(function () { $("#prd_tech_for_load").select2(); var sel_tech = $("#prd_tech_f…

在用到select2时，临时抱佛脚学习了一下

$('#e3').select2({ placeholder: "请输入", minimumInputLength: 1, separator: ",", // 分隔符 maximumSelectionSize: 5, // 限制数量 initSelection: function(element, callback) { // 初始化时设置默认值 }, createSearchChoice: function(term, data) { // 创建搜索结果(使用户…

【笔记】select2的使用

select2使用

一.简介 select2是Jquery用来代替选择框的一种组件.它让你可以定制下拉框,并且支持搜索.标记,远程数据源,无限滚动和其他更高级的功能.select2的下载地址为:https://select2.github.io/ .这里使用到的是select2-4.0.0版本.下载该版本后,解压文件,在dist目录下有js与css文件.使用select就需要引用这些的文件. 二.使用 1.引入jQuery与select2样式.js文件如下: <link href="css/select2.m…

select2取值报错，Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

用到了 select2 组件来多选收件人,用搜狗浏览器(6.2版高速模式)在执行到如下这句时报错(Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.),6.3版高速和兼容模式都没问题. var recipients =…

关于 jquery select2 多个关键字模糊查询的解决方法

select2 只针对元素的text()进行匹配,实际开发过程中可能会存在通过id 或者特殊编码进行多关键字匹配. 改动了下源码:红色为改动部分. process=function(element, collection) { var group; if (element.is("option")) { // modify by yuan 2016.2.15 if (query.matcher(term, element.text(), element) || query.matc…

Item 表单页面的 Select2 相关业务逻辑

Select2 插件官网:https://select2.github.io/ Select2 初始化说明: 代码在 public/javascripts/subchannel_items.js 中的 $("#subchannel_item_showable_id").select2 行. select2 方法中的参数说明: theme:指定 CSS 主题,Bootstrap 主题 Github 地址:https://github.com/select2/select2-bootstr…

bootstrap的select2校验及不影响原来的格式

Metronic_下拉列表Select2插件的使用

这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https://select2.github.io/examples.html. 我们在整个框架里面,用到了很多Select2控件来处理内容的显示,包括单选的下拉列表(包括级联选择框).复选的下拉列表.树形下拉列表等方式,界面效果如下所示. 1)编辑界面下的省份.城市.所在行政区的级联界面效果,选择省份,会加载对应…

select2去除搜索框

$("#type_select").select2({ minimumResultsForSearch: -1 });…

select2 插件

官网:http://select2.github.io/ Select2是基于jQuery的一个插件,没有引用jQuery,是没有效果的 1.在实现给select2添加placeholder效果的时候,遇到placeholder不起作用的问题,哎,真是又纠结了好久,最后请Vision帮忙看了一下,才发现,原来是我根本没给select2一个placeholder的机会,都没有给select2一个空的option,select2肿么有地方去显示placeholder要显示的内容呢? 2.…

【select2 使用】的更多相关文章