Angbike个人博客 > JavaScript/JQuery > select2 - ajax方式请求数据简单调用

select2 - ajax方式请求数据简单调用

JS及CSS引入:

<link rel="stylesheet" type="text/css" href="select2/css/select2.min.css"/>
<script type="text/javascript" src="select2/js/select2.min.js"></script>
<script type="text/javascript" src="select2/js/i18n/zh-CN.js"></script>

HTML:

<select class="form-control" id="test"></select>

JS:

$("#test").select2({
    ajax: {
        url: 'test/getTestData',    // 接口地址
        dataType : 'json',        // 数据类型
        type : 'POST',            // 请求方式
        headers: interFaceHeader,     // 接口header
        data: function (params) {
            return {
                condition: params.term // 接口参数(condition 参数名)
            };
        },
        processResults: function (data, params) {
            var datas = data.data;
            // 按照特定格式组装数据
            var options = new Array();
            $(datas).each(function(i, o) {
                options.push({
                    id : o+i,
                    text : o
                });
            });
            return {
                results: options
            };
        }
    },
    placeholder : '请选择',        // 提示信息
    multiple : true,            // 允许多个选项
    maximumSelectionLength : 3,            // 最多三个
    allowClear : true,            // 可清空
    language: "zh-CN"            // 提示语言
});

博客评论已关闭