jquery select2插件改造

痛定思痛。 2022-06-14 02:12 226阅读 0赞

# [Select2][] #

# [How to use][Select2] #

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

You need script like this:

<script>
     
    #1. added maximumDisplayOptionsLength options in select2
    # format of data_info: [{
       "id":"100","text":"JasonLi","code":"li"},{
       "id":"101","text":"Tomas","code":"tt"}]
    
    	$('#select_id').select2({
        		data:data_info,
        		placeholder:"请您选择",
        		minimumInputLength:1,
        		maximumDisplayOptionsLength:5,
        		language:"zh-CN",width:"349px",
        		templateResult:myTemplateResult,templateSelection:myTemplateSelection
        		});
    			
    function myTemplateResult(res){
    	if (res.loading) return res.text;
    	res.id = res.id;
    	if (isNotEmpty(res.code)) {
    		return res.code + ":" + res.text;
    	} else {
       return res.text;}
    }
    
    function myTemplateSelection(res){	
    	return res.text;
    }
    </script>

# Modify By #

JasonLi

\# My Source [https://github.com/jiuli/select2][Select2]

\#Origin Source [https://github.com/select2/select2][https_github.com_select2_select2]

[Select2]: https://github.com/jiuli/select2
[https_github.com_select2_select2]: https://github.com/select2/select2

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery中使用select2插件实现ajax实时请求数据

场景效果 ![Image 1][]![20190626095745808.gif][] select2相关 select2官网： [https://se

不念不忘少年蓝@/ 2023年10月18日 20:29/ 0 赞/ 53 阅读

相关 jQuery插件-搜索下拉框bootstrap-select

我主要是使用 `bootstrap-select` 插件的搜索下拉框的功能先看看效果 ![在这里插入图片描述][20200729131355125.gif] 使用

朱雀/ 2023年03月02日 13:10/ 0 赞/ 29 阅读

相关 jquery插件的插件验证_jQuery的dwImageProtector插件

jquery插件的插件验证 I've always been curious about the jQuery JavaScript library. jQuery has

ゝ一世哀愁。/ 2023年02月22日 01:25/ 0 赞/ 55 阅读

相关 html select插件,html select美化模拟jquery插件select2.js

select2.js是一个html select美化模拟类jquery插件，但是select2.js又远非简单的模拟美化那么简单，它还具有搜索功能，多选功能(可限制选择数量)，

川长思鸟来/ 2022年10月06日 13:50/ 0 赞/ 237 阅读

相关 jQuery插件

学习要点： 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件插件(Plugin)也成为 jQuery 扩展(Extension)，是一种遵循一定规

谁借莪１个温暖的怀抱￠/ 2022年08月18日 15:12/ 0 赞/ 404 阅读

相关 jquery select2插件改造

[Select2][] [How to use][Select2] <link href="/select2/select2.min.css" rel="s

痛定思痛。/ 2022年06月14日 02:12/ 0 赞/ 227 阅读

相关 SELECT 2 —— 替代SELECT 组件的jQuery 插件

文档地址： [https://select2.org/][https_select2.org] 一、简介 select2 是替代select 组件的jQu

逃离我推掉我的手/ 2022年06月07日 07:43/ 0 赞/ 689 阅读

相关 jQuery 插件：下拉框控件（select2）

官网：[https://select2.org/][https_select2.org] 官网例子：[http://select2.github.io/select2/in

Myth丶恋晨/ 2022年05月28日 03:38/ 0 赞/ 1092 阅读

相关 jQuery输入下拉模糊匹配插件之----jquery.editable-select

jquery.editable-select 一、简介：由于项目业务需求：需要在用户输入时下拉匹配数据库中已有的数据源，或者手动输入即可；二、插件的使

﹏ヽ暗。殇╰゛Y/ 2022年02月05日 07:21/ 0 赞/ 1251 阅读

相关前端插件一：jQuery Multi-Select多选插件

项目此项目是替换标准`<select>`（含有`multiple`属性的`select`标签）的一套交互友好的组件。特点免费（基于WTFPL许可证）

一时失言乱红尘/ 2021年06月26日 16:06/ 0 赞/ 986 阅读