select2 百度经验

2024-09-03

转：select2 使用教程（简）

用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本. 官网:http://select2.github.io/ 演示: 请选择由于博客系统的原因,所以只能演示简单的功能. 一.文件需要引入select2.full.js.select2.min.css(4.0.1版本)和jQuery.1.8.3及以上

利用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

[百度经验]window下连接mysql 错误代码 1045

连接mysql时出现错误代码 1045 Access denied for user 'root'@'localhost' (using password:YES) 百度经验:jingyan.baidu.com 方法/步骤 1 找到配置文件my.ini,打开. 我电脑中my.ini的路径为:(D:\MySQL\MySQL Server 5.6).如果找不到此路径可以用Everything软件找到该配置文件的位置. 2 搜索mysqld关键字,找到后,在mysqld下面添加skip-grant-t

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 百度经验

热门专题