select2的用法
<link href="../css/select2.min.css" rel="stylesheet" />
<script src="../js/jquery-1.8.2.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/zh-CN.js"></script>
<select class="js-data-example-ajax" id="liaison" ></select>
$("#liaison").select2({
ajax: {
url: "../../weixin/ashx/outside/applicat.ashx?action=liaison",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // 输入的值
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items, //返回值格式[{id:1,text:'text'},{id:2,text:'text'}]如果不按照此格式数据可能显示不出来,或者再次选择时值赋不上。
pagination: {
more: (params.page * 10) < data.total_count
}
};
},
cache: true
},
placeholder: '联络人搜索',
escapeMarkup: function (markup) { return markup; }, //自定义显示
minimumInputLength: 2, //输入长度
templateResult: formatRepo,
language: "zh-CN",
templateSelection: formatRepoSelection
});
function formatRepo(repo) {
if (repo.loading) {
return repo.text;
}
var markup = "<div class='select2-result-repository clearfix'>" +
// "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.text + "</div>";
//if (repo.description) {
// markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
//}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.name + "--" + repo.depname + " </div>" +
//"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
//"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.name || repo.text;
}
取值----------------------------$("#liaison").select2("data")[0].text
赋值----------------------------- $("#liaison").append(new Option("Jquery", 10001, false, true));
select2的用法的更多相关文章
- jQuery的下拉选select2插件用法
1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...
- select2插件用法
1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...
- 01:jQuery的下拉选select2插件用法
1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...
- 下拉框插件select2的使用
它的优点有: 样式还算好看,支持多选,支持索搜 下面来介绍下select2的用法 1.最简单的用法 只需要加载css和js即可使用 <select name="" id=&q ...
- 非常实用的select下拉框-Select2.js
在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...
- select2的基本用法
公司有个项目需要用到类似百度搜索功能的下拉框,自然想到使用select2. 先看下select2的效果图,如下: 下来简单介绍下这个控件的基本用法,主要简单介绍下远程加载数据: 1.首先引入需要的文件 ...
- Select2 用法
http://www.cnblogs.com/wuhuacong/p/4761637.html 2.这个做详细参考 http://www.jianshu.com/p/c5ab74b91b2e 3.ht ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
随机推荐
- Win2008R2+Apache+PHP+Tomcat配置
一.VC运行库 对于Apache和PHP,在Windows上运行的话都需要对应VC运行库的支持,即Apache.PHP和VC运行库这三者的版本必须相对应,这就会带来很多问题,比如下了较新的Apache ...
- 三维计算机视觉 —— 中层次视觉 —— RCNN Family
RCNN是从图像中检测物体位置的方法,严格来讲不属于三维计算机视觉.但是这种方法却又非常非常重要,对三维物体的检测非常有启发,所以在这里做个总结. 1.RCNN - the original idea ...
- iOS WKWebView (NSURLProtocol)拦截js、css,图片资源
项目地址github:<a href="https://github.com/LiuShuoyu/HybirdWKWebVIew/">HybirdWKWebVIew&l ...
- AbstractQueuedSynchronizer-AQS
AbstractQueuedSynchronizer,这个类是整个java.util.concurrent的核心之一. CountDownLatch 能够使一个或多个线程等待其他线程完成各自的工作后再 ...
- win10 安装mysql
现在mysql压缩包:https://downloads.mysql.com/archives/community/ 在目录下新建data文件夹,my.ini文件,内容如下: [mysqld] bas ...
- Eclipse的设置、调优、使用(解决启动卡顿等问题)----转
eclipse调优 一般在不对eclipse进行相关设置的时候,使用eclipse总是会觉得启动好慢,用起来好卡,其实只要对eclipse的相关参数进行一些配置,就会有很大的改善. 加快启动速度 1. ...
- ruby 基础知识2 - 区块 block
原文 1. block中的 yield 与遍历 5.times do |i| puts i end 或者 def my_times(n) i = 0 while n > i i += 1 yie ...
- Java基础学习笔记十九 File
IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...
- js运用3
1. js的本质就是处理数据.数据来自于后台的数据库. 所以变量就起到一个临时存储数据的作用. ecmascript制定了js的数据类型. 数据类型有哪些? 1. 字符串 string 2. 数字 n ...
- SpringBoot:四种读取properties文件的方式
前言 在项目开发中经常会用到配置文件,配置文件的存在解决了很大一份重复的工作.今天就分享四种在Springboot中获取配置文件的方式. 注:前三种测试配置文件为springboot默认的applic ...