select2的使用(ajax获取数据)

最新推荐文章于 2023-11-20 12:01:13 发布

weixin_34315665

最新推荐文章于 2023-11-20 12:01:13 发布

阅读量621

点赞数

原文链接：https://my.oschina.net/u/3358860/blog/3011093

版权

本文介绍了在项目中使用Select2组件与Ajax结合动态加载数据的方法，包括两种不同的处理方式：直接渲染列表和动态模糊查询。在模糊查询时遇到的问题和解决方案被详细阐述，如results数据格式的调整以确保正确选中选项。同时，还讨论了Select2的语言本地化设置，并提供了获取选中值的代码示例。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

最近项目中用到了select2来做下拉框，数据都是通过ajax从后台获取, 支持动态搜索等。

使用到的下拉框分有两种情况：

一种是直接发送ajax请求渲染列表；另一种因为查询回的数据有六万多条，导致整个页面卡顿，所以采用的是先让用户至少输入3个字以后再动态模糊查询数据。

基本的使用方法看官方文档就可以明白，但是在做模糊查询的时候遇到了一些问题，在此记录一下。

第一种情况的下拉框，先是封装了函数获取数据，并拼接了列表模版，然后设置templateSelection即可。

复制代码

function getProvinceList(ele) {
        var proList = '<option value="-1">--省--</option>'
        $.ajax({
            type:'get',
            contentType:'application/json;charset=utf-8',
            url: dicUrl + 'queryTwoLayerAddress',
            dataType:'json',
            success: function(res) {
                if(status == 00) {          
                    var resArr = res.data
                    for( var i = 0; i < resArr.length; i++) {
                        proList += '<option value = '+ resArr[i].code +'>'+ resArr[i].codeText +'</option>'     
                    }               
                    ele.html(proList)           
                }   
            }
        })
    }

$('#addrProvince').select2({

language: localLang,

placeholder:'请选择省份',

templateSelection: getProvinceList($('#addrProvince'))

})

复制代码

第二种做法则是按照文档里的做法，初始化select框后再发送ajax请求.

复制代码

$('#bankName').select2({
        minimumInputLength:3,
        id: function(data) {     //把[{id:1, text:"a"}] 转换成[{data.id:1, data.codeText:"a"}], 因为后台返回的数据是[{id:1, codeText:"a"}]
            return data.id
        },
       // text: function(data) {return data.codeText},   //不生效
        formatSelection: function (data) { return data.codeText },  //生效
        ajax: {
            type:'get',
            url: function(p