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 ...
随机推荐
- 进度条的制作-python
import time,sys def view_bar(num, total): rate = float(num) / float(total) rate_num = int(rate * 100 ...
- appium 计算器demo
需要修改的是 platformVersion deviceName demo: #coding=utf- from appium import webdriver import time desire ...
- 力扣(LeetCode)448. 找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不使 ...
- vue-cli3快速创建项目
文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...
- TortoiseSVN上传cocos2dx的项目不能打包的问题!
由于TortoiseSVN默认是忽略 *.a的,导致上传的项目文件缺少所有的*.a文件. 在TortoiseSVN->Settings->General->Global ignore ...
- 网络通信框架:Netty和Mina
参考: https://www.cnblogs.com/wrencai/p/5907042.html https://blog.csdn.net/qq_29954971/article/details ...
- 算法笔记--单调队列优化dp
单调队列:队列中元素单调递增或递减,可以用双端队列实现(deque),队列的前面和后面都可以入队出队. 单调队列优化dp: 问题引入: dp[i] = min( a[j] ) ,i-m < j ...
- Java原子操作类AtomicInteger应用场景
Java中有那么一些类,是以Atomic开头的.这一系列的类我们称之为原子操作类.以最简单的类AtomicInteger为例.它相当于一个int变量,我们执行Int的 i++ 的时候并不是一个原子操作 ...
- nodejs导出excel
//导出Excel var nodeExcel = require("excel-export"); var fs = require("fs"); var c ...
- lanmp环境一键安装
yum install -y wgetwget http://dl.wdlinux.cn/files/lanmp_v3.2.tar.gztar zxvf lanmp_v3.2.tar.gzsh lan ...