开发者社区> ke_ry> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

select2中的ajax请求

简介: 本地数据方式 AJAX获取数据方式 代码 本地数据方式: html的select中的option是可选的,如果不写一个空的option标签,则默认选择第一项;如果写了option标签,则默认为空,但调用的时候,最好设置placeholder属性,为了美观;AJ...
+关注继续查看
<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>

  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
新来的妹纸问我 AJAX 请求为什么不安全?我没有回答出来。。。
开篇三问 AJAX请求真的不安全么? AJAX请求哪里不安全?
86 0
AJAX 请求真的不安全么?
开篇三问 AJAX请求真的不安全么? AJAX请求哪里不安全? 怎么样让AJAX请求更安全?
71 0
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
126 0
+关注
ke_ry
开源技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载