select2使用方法总结

简介: 官网:http://select2.github.io/ 调用   一、查询 获取当前选中值 $('#xxx').val()   电话号码查询示例 var selectTelehone; $(function () { selectTeleho...

官网:http://select2.github.io/

调用

<link href="~/Content/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/select2/select2.full.min.js"></script>
<script src="~/Scripts/select2/i18n/zh-CN.js"></script>

 

一、查询

获取当前选中值

$('#xxx').val()

 

电话号码查询示例

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 "输入号码搜索...";
    }
}

 

二、操作

1.清空选中项

$("#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('')清除当前被选中的文本

 

2.设置选中项

$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });//如果使用ajax获取数据,无法使用本方法,因为option在非查询时是空的

 

相关文章
|
7月前
|
开发框架 .NET C#
C#学习相关系列之Linq用法---where和select用法(二)
C#学习相关系列之Linq用法---where和select用法(二)
421 2
|
7月前
|
开发框架 .NET C#
C#学习相关系列之Linq用法---group和join相关用法(三)
C#学习相关系列之Linq用法---group和join相关用法(三)
260 1
|
7月前
|
SQL 关系型数据库 MySQL
Greenplum【SQL 02】ROW_NUMBER编号函数使用方法举例
Greenplum【SQL 02】ROW_NUMBER编号函数使用方法举例
168 0
|
SQL 数据库
SELECT语句基本使用
SELECT语句基本使用。
131 1
软件测试|深入理解SQL FULL JOIN:语法、用法及示例解析
软件测试|深入理解SQL FULL JOIN:语法、用法及示例解析
|
SQL 数据挖掘 测试技术
软件测试|深入理解SQL RIGHT JOIN:语法、用法及示例解析
软件测试|深入理解SQL RIGHT JOIN:语法、用法及示例解析
|
SQL 数据库
拷贝的表的SQL语句 SELECT INTO 和 INSERT INTO SELECT的用法与区别
语句形式为:Insert into Table2(field1,field2,…) select value1,value2,… from Table1
212 0
|
SQL 数据库
★SQL高级教程(2)——Alias、JOIN、INNER JOIN...(建议收藏)★上
★SQL高级教程(2)——Alias、JOIN、INNER JOIN...(建议收藏)★上
193 0
|
SQL
★SQL高级教程(2)——Alias、JOIN、INNER JOIN...(建议收藏)★下
★SQL高级教程(2)——Alias、JOIN、INNER JOIN...(建议收藏)★下
130 0
|
SQL Java 关系型数据库
SQL 语法--表特定语句--create、insert、desc | 学习笔记
快速学习 SQL 语法--表特定语句--create、insert、desc
242 0
SQL 语法--表特定语句--create、insert、desc | 学习笔记

相关课程

更多