下面介绍select2.js的方法,已经整理好文件,可以直接下载使用:

实现效果如下: 引用文件:select2.min.css jquery.js select2.full.min.js

  1. <h3>本地数据方式</h3>
  2. <select class="form-control input-sm downList1">
  3. <option></option>
  4. </select>
  5.  
  6. <h3>AJAX获取数据方式</h3>
  7. <select class="form-control input-sm downList2">
  8. <option></option>
  9. </select>

本地数据方式:
html的select中的option是可选的,如果不写一个空的option标签,则默认选择第一项;如果写了option标签,则默认为空,但调用的时候,最好设置placeholder属性,为了美观;AJAX获取数据方式:
html的select中的option是必选的

  1. <script type="text/javascript">
  2. //one 本地数据方式
  3. var dataList = [
  4. { id: 0, text: 'ljiong.com(老囧博客)' },
  5. { id: 1, text: 'Ants(蚂蚁)' },
  6. { id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
  7. { id: 3, text: 'vae(许嵩)' },
  8. { id: 4, text: 'Badminton(羽毛球)' }
  9. ];
  10. $(".downList1").select2({
  11. data: dataList,
  12. placeholder:'请选择',//默认文字提示
  13. language: "zh-CN",//汉化
  14. allowClear: true//允许清空
  15. })
  16.  
  17. //two AJAX获取数据方式(请求一次)
  18. var oneReq = [];
  19. $.ajax({
  20. type:"post",
  21. url:"URL",
  22. dataType:"json",
  23. contentType:"application/json",
  24. success:function(data){
  25. oneReq = data;
  26. },
  27. error:function(data){
  28.  
  29. }
  30. });
  31. $(".downList2").select2({
  32. data: oneReq,
  33. placeholder:'请选择',//默认文字提示
  34. language: "zh-CN",//汉化
  35. allowClear: true//允许清空
  36. })
  37.  
  38. //two AJAX获取数据方式(每次请求)
  39. $(".downList2").select2({
  40. ajax: {
  41. type:'GET',
  42. url: "url",
  43. dataType: 'json',
  44. delay: 250,
  45. data: function (params) {
  46. return {
  47. q: params.term, // search term 请求参数
  48. page: params.page
  49. };
  50. },
  51. processResults: function (data, params) {
  52. params.page = params.page || 1;
  53. /*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
  54. var arr = data.result.list
  55. for(item in arr){
  56. itemList.push({id: item, text: arr[item]})
  57. }*/
  58. return {
  59. results: data.items,//itemList
  60. pagination: {
  61. more: (params.page * 30) < data.total_count
  62. }
  63. };
  64. },
  65. cache: true
  66. },
  67. placeholder:'请选择',//默认文字提示
  68. language: "zh-CN",
  69. tags: true,//允许手动添加
  70. allowClear: true,//允许清空
  71. escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
  72. minimumInputLength: 1,//最少输入多少个字符后开始查询
  73. formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
  74. formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
  75. });
  76. </script>

获取选中的值:

  1. 获取id $(".downList2").select2("data")[0].id;
  2. 获取text $(".downList2").select2("data")[0].text;
  3.  
  4. 也可使用一下方式取值:
  5.  
  6. $(".downList2").val();
  7. $(".downList2").select2('val');

清空选择项和设置不可用

  1. //清空选择
  2. $("#c01-select").val(null).trigger("change");
  3. $("#c01-select").val("你的placeholder").trigger("change");//或者
  4. //如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项
  5.  
  6. //disabled
  7. $("#c01-select").prop("disabled", false);//可用
  8. $("#c01-select").prop("disabled", true);//不可用

select2中的ajax请求的更多相关文章

  1. PHP--------TP中的ajax请求

    PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...

  2. javascrpt 中的Ajax请求

    回顾下javascript中的Ajax请求,写一个小例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. ASP.NET Core Razor中处理Ajax请求

    如何ASP.NET Core Razor中处理Ajax请求 在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过.今天闲来无事,准备用Rozor ...

  4. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  5. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题

    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...

  6. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  7. Struts2 在登录拦截器中对ajax请求的处理

    前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个字符串. 之前尝试的方法是在拦截器中返回一个标识给ajax,然后再在每一个ajax请求成功之后 ...

  8. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  9. SpringBoot入门07-Thymeleaf中显示ajax请求到的数据

    Thymeleaf中显示ajax请求所需依赖 <!--所需依赖--><dependency> <groupId>org.springframework.boot&l ...

随机推荐

  1. 进度条的制作-python

    import time,sys def view_bar(num, total): rate = float(num) / float(total) rate_num = int(rate * 100 ...

  2. appium 计算器demo

    需要修改的是 platformVersion deviceName demo: #coding=utf- from appium import webdriver import time desire ...

  3. 力扣(LeetCode)448. 找到所有数组中消失的数字

    给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不使 ...

  4. vue-cli3快速创建项目

    文档:https://cli.vuejs.org/zh/guide/ 条件: npm 更至最新 node >=8.9 1.全局安装 npm install -g @vue/cli 或 yarn ...

  5. TortoiseSVN上传cocos2dx的项目不能打包的问题!

    由于TortoiseSVN默认是忽略 *.a的,导致上传的项目文件缺少所有的*.a文件. 在TortoiseSVN->Settings->General->Global ignore ...

  6. 网络通信框架:Netty和Mina

    参考: https://www.cnblogs.com/wrencai/p/5907042.html https://blog.csdn.net/qq_29954971/article/details ...

  7. 算法笔记--单调队列优化dp

    单调队列:队列中元素单调递增或递减,可以用双端队列实现(deque),队列的前面和后面都可以入队出队. 单调队列优化dp: 问题引入: dp[i] = min( a[j] ) ,i-m < j ...

  8. Java原子操作类AtomicInteger应用场景

    Java中有那么一些类,是以Atomic开头的.这一系列的类我们称之为原子操作类.以最简单的类AtomicInteger为例.它相当于一个int变量,我们执行Int的 i++ 的时候并不是一个原子操作 ...

  9. nodejs导出excel

    //导出Excel var nodeExcel = require("excel-export"); var fs = require("fs"); var c ...

  10. lanmp环境一键安装

    yum install -y wgetwget http://dl.wdlinux.cn/files/lanmp_v3.2.tar.gztar zxvf lanmp_v3.2.tar.gzsh lan ...