【笔记】select2的使用

程序员淑芳技术 2022年11月10日

0 收藏 986 点赞 3,119 浏览 1170 个字

<script src="~/Scripts/jquery-1.10.2.js"></script>    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.css" rel="external nofollow"  rel="stylesheet" />    <script src="~/Content/select2-master/dist/js/select2.js"></script>
    <link href="~/Content/select2-master/dist/css/select2.css" rel="external nofollow"  rel="stylesheet" />

function loadAssetNameOrVersion(displayText) {
    displayText = displayText || "请选择";
    $("#asset_nameOrVersion").select2({
        placeholder: displayText,//默认显示
        minimumInputLength: 0,//输入多少长度的值的时候执行后台请求查询
        //选中事件（选中后显示的值）
        formatSelection: function (object) {
            return object.assetName + "/" + object.productName;
        },
        //显示的值（加载的在下拉框的值）
        formatResult: function (object) {
            return object.assetName + "/" + object.productName;
        },
        id: function (data) {//选中后取的值
            return data.productId;
        },
        ajax: {
            url: "/api/services/app/asset/GetOfficeProductsByKey",
            dataType: "json",
            params: {
                contentType: 'application/json'//此处可修改contentType类型（这个地方坑了我好久，不知道还要加params包起来）
            },
            type: "post",//请求类型
            data: function (term, page) {//传给后台的参数，可自行构造
                return JSON.stringify({
                    prefix: term,
                    limit: 4,
                    page: page,
                });
            },
            results: function (data, page, query) {        //请求成功，接收返回值
                var more = (page * 4) < data.result.totalCount;
                return { results: data.result.items, more: more };
            },
        }
    });
}