插件官网:https://select2.github.io/examples.html

  页面引入:

// 页面顶部
<link rel="stylesheet" type="text/css" href="css/select2.min.css"> // 页面底部
// 依赖jQuery,引入jQuery之后,还需引入以下js文件
<script type="text/javascript" src="js/select2/select2.full.min.js"></script>
<script type="text/javascript" src="js/select2/lang/zh-CN.js"></script>

  调用select2

var util = {
select2: function(options){
select2(options); //将输入的值作为其值
var inputAsValue = function($target, value){
var id = "select2-" + $target.attr("id") + "-container";
$("#advertiser_name_input").val(value).keyup();
$("#"+id).text(value);
}; function select2(arg) {
var requireName = arg.requireName;
arg.target.select2({
placeholder:arg.placeholder, // 文本框的提示信息
language: 'zh-CN',
         // 若不想引入zh-CN.js文件,可注释上一句,改为下面的即可
         /*
          language: {

            noResults: function() {
              return"未找到结果"
            } ,searching: function() {
              return"搜索中…"
            }

          }
         */
   minimumInputLength: 1, // 至少输入n个字符,才去加载数据;若设置为0,则点击选择框,不用输入内容,就去加载数据;默认为0
maximumInputLength: 100, // 限制最大字符,以防坑
                data: options.data,
ajax: {
url: arg.url,
dataType: 'json',
method: 'post',
quietMillis:100,
delay: 250,
data: function (params) {
var data = {}, id;
data[arg.requireName] = params.term; // 查询的关键字
// data['page'] = params.page;
return $.extend(true, data, arg['other']);
},
processResults: function (result, params) {
            // params.page = params.page || 1;
if(result && result.flag && !$.isEmptyObject(result.data)){
var resultData = result.data,
selectData = [], selectObj = {};
for(var i=0,len=resultData.length; i<len; i++){
selectObj = {
'id': resultData[i]['id'] || '',
'text': resultData[i]['name'] || '',
'industry_id': resultData[i]['industry_id'] || ''
};
selectData.push(selectObj);
}
return {
/* pagination: {
more: (params.page * 30) < 100 //data.total_count
},*/
results: selectData
};
}else{
var noData = [
{id:0,text:'暂无数据'}
];
return {
results:noData
};
}
},
cache: true
},
escapeMarkup: function (markup) { return markup; }
});
arg.target.on("change", function(e){
options.change && options.change();
});
}
}
}; // 调用
util.select2({
target: $('#select'),
url: pageInfo.activityNameUrl,
requireName: 'key',
callback: '',
data: {'id', 11},
change: function(){
var $select = $('#select');
var data = $select.select2("data")[0];
// 其余操作
}
});

  注意:注释的代码可以实现分页功能, 鼠标拖动滚动条往下滚时,再去请求再显示下一页的效果;但是需要后台支持,根据请求参数page的页数,返回响应的数据。

  设置默认值或回填值:

 if(selectId !=''){
$("#select").html('<option value="'+selectId +'">'+selectVal+'</option>').trigger('change');
}

  显示全部:

名称:<select class="select-w100 select2" name="select" id="select">
<option value="">全部</option>
</select>

  获取值(多选值,默认用逗号分隔):

获取多选值
$('#save-btn').click(function(){
var city = $('#city').val();
var cityDesc = $('#city option:selected').text();
})

  特殊地方:select2下拉框插件,可以做多选,但是每选一次就会收起一次下拉。
  逐个勾选,多选完后,点击下拉框外面的区域再收起。

  可以设置:closeOnSelect: false

select2插件使用小记的更多相关文章

  1. select2插件使用小记2 - 多选联动 - 笔记

    这是select2插件使用的第二篇,可参考第一篇 select2插件使用小记.上一篇主要是关于基本的使用,这篇主要是关于多选,及联动的.侧重点不同. 效果图如下: 遵从W3C标准:结构.样式.行为.以 ...

  2. select2插件

    引入select2插件<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min. ...

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

    在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...

  4. Metronic_下拉列表Select2插件的使用

    这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案例,可以参考地址:https:// ...

  5. jQuery的下拉选select2插件用法

    1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...

  6. select2插件用法

    1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...

  7. Select2插件的隐藏、设置宽度

    <select id="selPrinvice" class="Select2 select2-hidden-accessible" style=&quo ...

  8. 01:jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  9. 在select2插件中append下拉选,点击没反应的解决

    今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...

随机推荐

  1. css进阶篇

    一.css的属性值 1)字体属性 font-size: 5px; /* 字体大小 */ font-size: 20px/50%/larger /* 字体的大小 */ font-family:'Luci ...

  2. MyBatis中log4j 和 参数 和 分页和别名 功能

    1.配置全局文件,注意各个配置标签的顺序 properties?, settings?, typeAliases?, typeHandlers?, objectFactory?,   objectWr ...

  3. 爬虫模块之解决IO

    一 asyncio模块 asyncio模块:主要是帮我们检测IO(只能是网路IO). @asyncio.coroutine:装饰器 tasks:任务列表 get_event_loop:起任务 run_ ...

  4. MySQL API函数

    MySQL提供了很多函数来对数据库进行操作,大致可以分为以下几类:        第一部分 控制类函数         mysql_init()初始化MySQL对象    mysql_options( ...

  5. 第29章:MongoDB-索引--全文索引

    ①全文索引 全文索引是用于对长文本检索来使用的,是用正则表达式只能对字符串类型的值进行检索.注意:创建索引是一件比较耗时耗费资源的事情,而全文索引更是耗时更厉害,如果对索引键的内容比较长,需要对内容进 ...

  6. DOM10-1节点层次

    DOM(问的那个对象模型)是针对HTML和XML文档的API.DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的一部分. 每个节点都拥有各自的特点.数据和方法,另外和其他节点也存在某种 ...

  7. css 特殊使用技巧

    1  border颜色设置 border-color: transparent black black black;   分别设置四条边框的颜色  上边transparent 透明无色 2  阴影 t ...

  8. JavaScript相关基础知识点

    JavaScript简介: JavaScript是脚本语言,是一种轻量级的编程语言,是可插入 HTML 页面的编程代码,插入 HTML 页面后,可由所有的现代浏览器执行. JavaScript使用: ...

  9. 美团基于STORM的应用

    https://my.oschina.net/dolphinboy/blog/2933843

  10. POJ 1191棋盘分割问题

    棋盘分割问题 题目大意,将一个棋盘分割成k-1个矩形,每个矩形都对应一个权值,让所有的权值最小求分法 很像区间DP,但是也不能说就是 我们只要想好了一个怎么变成两个,剩下的就好了,但是怎么变,就是变化 ...