zoukankan      html  css  js  c++  java
  • select2中的ajax请求

    <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是必选的
    javascript
    
    <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>
    

      

  • 相关阅读:
    The FLARE On Challenge
    CVE-2013-2551漏洞成因与利用分析(ISCC2014 PWN6)
    CVE-2014-0322漏洞成因与利用分析
    CVE-2013-3897漏洞成因与利用分析
    译:《深入解析WINDOWS VISTA APC》——PART 1
    MemoryInjector 无痕注入
    一个APC引起的折腾 之题外记
    一个APC引起的折腾
    2020
    javascriptcore调试笔记
  • 原文地址:https://www.cnblogs.com/keyi/p/6963077.html
Copyright © 2011-2022 走看看