select2的学习和jqgrip的学习

select2的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select2的学习</title>
    <script>
        remoteToLoadCss('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/datepicker.css');
        remoteToLoadJs('media/js/jquery-1.11.1.js');
        remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.js');
        remoteToLoadJs('BootStrap4/assets/plugins/bootstrap-datepicker/old_datepaker/bootstrap-datepicker.zh-CN.min.js');
    </script>
    <script src="../../../js/select2.min.js"></script>
    <link href="../../../css/select2.min.css" rel="stylesheet">
</head>
<body>
<div class="col-sm-3">
    <div class="control-group">
        <label class="control-label">海关关区</label>
        <div class="controls">
            <!--<input type="text" class="form-control col-sm-6" id="cusCustomsCodeText" name="cusCustomsCodeText" v-model="ytEntryDynamicApply.cusCustomsCodeText" placeholder="海关关区"/>-->
            <select class="form-control col-sm-6" id="cusCustomsCodeText" name="cusCustomsCodeText" v-model="ytEntryDynamicApply.cusCustomsCodeText">

            </select>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#cusCustomsCodeText').select2({
            placeholder: '请输入您的海关关区',
            ajax: {
                url: restServerBaseURL + 'yacht/entryDynamicApply/getCusCustomsCodeText',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 1
        });
    })
</script>
</body>
</html>

整合博客：https://www.cnblogs.com/youmingkuang/p/8669497.html

var selectTelehone;

$(function () {
    selectTelehone = $("#select-telehone");
    initSelectTelephone();
});

function initSelectTelephone() {
    selectTelehone.select2({
        ajax: {
            url: function (params) {
                return "/PartyA/Telephone/SearchByShortNumber?partyACompanyId=" + partyACompanyId + '&TelephoneNumber=' + params.term;
            },
            dataType: 'json',
            processResults: function (data, params) { 
                for (var i = 0; i < data.length; i++) {
                    data[i].id = data[i].Id;
                    data[i].text = data[i].TelephoneNumber;
                } 
                return {
                    results: data
                };
            },
            cache: true
        },
        allowClear: true,    //选中之后，可手动点击删除            
        placeholder: "输入号码搜索...",
        escapeMarkup: function (markup) { return markup; }, // 让template的html显示效果，否则输出代码
        minimumInputLength: 2,    //搜索框至少要输入的长度，此处设置后需输入才显示结果
        language: "zh-CN",         //中文
        templateResult: formatTelehoneNumber, // 自定义下拉选项的样式模板
        templateSelection: formatTelehoneNumberSelection     // 自定义选中选项的样式模板
    });

    selectTelehone.on("select2:select", function (evt) {
        //这里是选中触发的事件
        //evt.params.data 是选中项的信息
    });

    selectTelehone.on("select2:unselect", function (evt) {
        //这里是取消选中触发的事件
        //如配置allowClear: true后，触发
    });
}

function formatTelehoneNumber(item) {
    if (item.loading) return item;
    var markup = '<div> <p class="text-primary">电话号码：' + item.TelephoneNumber + '</p>'; 
    //markup += '这里可以添加其他选项...';
    markup += ' </div>';
    return markup;
}


function formatTelehoneNumberSelection(item) {
    if (item.TelephoneNumber) {
        return item.TelephoneNumber;
    }
    else {
        return "输入号码搜索...";
    }
}

$("#id")..unbind("change").bind("change", function () {
　　//变更事件
});

$("#id").select2().val(null).trigger("change");//如无业务需求也可不使用trigger("change")
$("#id").find("option").remove();//清除搜索时输入的文字，默认会被记下、此操作仅在查询使用ajax时使用

//以下清空选中/赋值文本，但是无清空选中项的值
//$("#select2-select-telehone-container")的‘select-telehone’为select的ID值
$("#select2-select-telehone-container").closest('.select2-container--below').addClass("select2-container--focus").removeClass("select2-container--below");//清除当前被选中的文本
$("#select2-select-telehone-container").prop("title", '');//清除当前被选中的title属性，也可使用removeAttr('title')
$("#select2-select-telehone-container").html('<span class="select2-selection__placeholder">默认提示文本</span>')； //也可使用html('')清除当前被选中的文本

jqgrip的学习网：https://blog.mn886.net/jqGrid/

来源：https://www.cnblogs.com/maigy/p/11954301.html

标签

select2

select默认选中

return