select2中的ajax请求
下面介绍select2.js
的方法,已经整理好文件,可以直接下载使用:
实现效果如下: 引用文件:select2.min.css
jquery.js
select2.full.min.js
<h3>本地数据方式</h3>
<select class="form-control input-sm downList1">
<option></option>
</select> <h3>AJAX获取数据方式</h3>
<select class="form-control input-sm downList2">
<option></option>
</select>
本地数据方式:
html的select中的option是可选的,如果不写一个空的option标签,则默认选择第一项;如果写了option标签,则默认为空,但调用的时候,最好设置placeholder属性,为了美观;AJAX获取数据方式:
html的select中的option是必选的
<script type="text/javascript">
//one 本地数据方式
var dataList = [
{ id: 0, text: 'ljiong.com(老囧博客)' },
{ id: 1, text: 'Ants(蚂蚁)' },
{ id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
{ id: 3, text: 'vae(许嵩)' },
{ id: 4, text: 'Badminton(羽毛球)' }
];
$(".downList1").select2({
data: dataList,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
}) //two AJAX获取数据方式(请求一次)
var oneReq = [];
$.ajax({
type:"post",
url:"URL",
dataType:"json",
contentType:"application/json",
success:function(data){
oneReq = data;
},
error:function(data){ }
});
$(".downList2").select2({
data: oneReq,
placeholder:'请选择',//默认文字提示
language: "zh-CN",//汉化
allowClear: true//允许清空
}) //two AJAX获取数据方式(每次请求)
$(".downList2").select2({
ajax: {
type:'GET',
url: "url",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term 请求参数
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
/*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
var arr = data.result.list
for(item in arr){
itemList.push({id: item, text: arr[item]})
}*/
return {
results: data.items,//itemList
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder:'请选择',//默认文字提示
language: "zh-CN",
tags: true,//允许手动添加
allowClear: true,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 1,//最少输入多少个字符后开始查询
formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
});
</script>
获取选中的值:
获取id: $(".downList2").select2("data")[0].id;
获取text: $(".downList2").select2("data")[0].text; 也可使用一下方式取值: $(".downList2").val();
$(".downList2").select2('val');
清空选择项和设置不可用
//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项 //disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用
select2中的ajax请求的更多相关文章
- PHP--------TP中的ajax请求
PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...
- javascrpt 中的Ajax请求
回顾下javascript中的Ajax请求,写一个小例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- ASP.NET Core Razor中处理Ajax请求
如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- Struts2 在登录拦截器中对ajax请求的处理
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...
- React 中的 AJAX 请求:获取数据的方法
React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...
- SpringBoot入门07-Thymeleaf中显示ajax请求到的数据
Thymeleaf中显示ajax请求所需依赖 <!--所需依赖--><dependency> <groupId>org.springframework.boot&l ...
随机推荐
- 小程序之image图片实现宽度100%,高度自适应
哇 今天搞了半天 图片一直变形啊啊啊啊 宽度100% 高度给100% 给auto 完全不管用啊啊啊啊 然后最后最终!!!! 首先我们要给我们的图片一个100%的宽度!让它自适应!! .g ...
- java 四种线程池的异同
四种线程池的区别仅仅在于executors让threadpoolexecutor的构造器的参数不同,即核心线程池数,最大线程池数等不同.但是其他的,例如终止线程池等都是一样的
- ZZNU 2095 : 我只看看不写题
把所有时间加起来,最后从大到小排序,一定要把大的先减去.注意花费的时间都是1,这一秒用过就不能再用了,所有用到了并查集的部分知识 #include<iostream> #include&l ...
- VC.窗口最前(置顶)
1.Delphi7的代码 procedure TfrmMain.cbWndTopmostClick(Sender: TObject); var liExStyle :LongInt; begin // ...
- [html]自定义滚动条风格
webkit: <style type="text/css"> *{ margin: 0; padding: 0; } ::-webkit-scrollbar { wi ...
- [osg]OSG使用更新回调来更改模型
使用回调类实现对场景图形节点的更新.本节将讲解如何使用回调来实现在每帧的更新遍历(update traversal)中进行节点的更新. 回调概览 用户可以使用回调来实现与场景 ...
- Rancher中的服务升级实验
个容器副本,使用nginx:1.13.0镜像.假设使用一段时期以后,nginx的版本升级到1.13.1了,如何将该服务的镜像版本升级到新的版本?实验步骤及截图如下: 步骤截图: 个容器,选择镜像ngi ...
- 写给前端的Python依赖管理指北
概述 在Python的项目中,我们可以通过pip来安装依赖包,但是不像npm install,pip默认安装的依赖包会挂在全局上,不利于项目工程协作. 这时候需要一款类似npm的工具记录我们的项目依赖 ...
- DEBUG(2)--函数的输入参数要做适当的检查
今天在调试程序时发现,在单步运行的情况下,程序执行没有问题,但是直接运行就会出问题.出问题的代码如下 for(int col=0;col<=9;++col) { int killid=Pos ...
- linux基础02-bash特性
Linux的行结束符是:[$] Windows的行结束符是:[$+回车] 目录管理:ls.cd.pwd.mkdir.rmdir.tree 文件管理:touch.stat.file.rm.cp.mv.n ...