select2插件使用

JS\CSS文件导入,在此之前,需先导入1.8以上版本的JQuery

<link rel="stylesheet" type="text/css" href="select2/css/select2.css" />

<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/select2/js/select2.js" type="text/javascript" charset="utf-8"></script>

1、本地加载

function initSelect2(){
        var dataList = [
            { id: 0, text: 'aaaaaa' },
            { id: 1, text: 'Ants(蚂蚁)' },
            { id: 2, text: 'can you speak javascript(你能讲JavaScript嘛)' },
            { id: 3, text: 'vae(许嵩)' },
            { id: 4, text: 'Badminton(羽毛球)' }
        ];
        $("#custname").select2({
            data: dataList,
            placeholder:'请选择',//默认文字提示
            language: "zh-CN",//汉化
            allowClear: true//允许清空
        });
    }

2、ajax加载

 function select2Ajax(){

        $("#custname").select2({
            ajax: {
                url: "url",
                type: "POST",
                dataType: "json",
                async: true,
                delay: 500,
                contentType: 'application/json',
                data: function(params){
                    var query =  {
                        "ROOT": {
                           "BUSI_INFO": {
                               "CUST_NAME": params.term
                            }  
                        }
                    };
                    return JSON.stringify(query)
                },
                processResults: function (data, params) {
					/*var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候,可以使用类似此方法创建新的数组对象
					 var arr = data.result.list
					 for(item in arr){
					 itemList.push({id: item, text: arr[item]})
					 }*/
                    var returnData ;
                    if(data.ROOT.BODY.RETURN_CODE == 0) {
                        returnData = data.ROOT.BODY.OUT_DATA.rows;
                    }else{
                        returnData = "服务调用出错,请刷新界面重试。"
                    }
                    return {
                        results: returnData
                    };
                },
                cache: true
            },
            placeholder:'请选择',//默认文字提示
            language: "zh-CN",
            tags: false,//允许手动添加
            allowClear: true,//允许清空
            // escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
            minimumInputLength: 2//最少输入多少个字符后开始查询
//            formatResult: function formatRepo(repo){return repo.text;}, // 函数用来渲染结果
//            formatSelection: function formatRepoSelection(repo){return repo.text;} // 函数用于呈现当前的选择
        });
      // select2 change 事件
        $("#custname").on("select2:select",function(){
            $("#custId1").val("new value");
        });
    }

外部调用select2的内置函数AllowClear,重置选中值

$("#custname").val(null).trigger('change.select2');

猜你喜欢

转载自blog.csdn.net/u013240609/article/details/81945438
今日推荐