Select2下拉框总结（全）

最新推荐文章于 2024-09-10 13:54:44 发布

ppxin

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量4.2k

点赞数

分类专栏： JQuery笔记文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/ppxin/article/details/89372316

版权

JQuery笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

select2，利用ajax高效查询大数据列表（可搜索、可分页）

select2，利用ajax高效查询大数据列表（可搜索、可分页） - 路修远而求索 - 博客园

-----------------------------------------------------------------------------------------------------------

$('input#email').select2({
  ajax: {
    url: '/admin/app_token_program/ajax_get_mobile_account',
    type: 'GET',
    dataType: 'json',
    delay: 250,
    data: function (account, page) {
      return {
        account: account,// search term
        page: page,// current page
      };
    },
    results: function (user_mobile_accounts, page) {
      var data = [];
      if (user_mobile_accounts === null) {
        data.push({
          id: null,
          text: 'No Matches'
        })
      } else {
        $.each(user_mobile_accounts, function(index, value) {
          data.push({
            id: value.email,
            text: value.email+" - "+value.account_number
          })
        });
      }
      return {
        results: data,
        more: user_mobile_accounts.length == 10
      };
    },
    cache: true
  },
  formatNoMatches: function(term) {
    return "No Matches";
  },
  minimumInputLength: 0,
  initSelection : function (element, callback) {
    var data = {id: element.val(), text: element.val()};
    callback(data);
  }
})
  .on('change', function (e) {

  });

---------------------------------------------------------------------------------------------------

jQuery-select2 官方文档笔记（一）——基础应用

jQuery-select2 官方文档笔记（一）——基础应用_WWF_HelloWorld-CSDN博客_select2

文章目录
一、上手
1. CDN
2. 单选select
3. 多选select
4. 禁用状态
5. 宽度（width）
6. 关于选项（Options）
7. Placeholders
二、Data Sources
1. select2数据源格式要求
2. 在数据源中标明预选中(`"selected": true`)和禁用状态(`"disabled": true`)
3. 把数据转换为要求的格式
4. 分组数据
5. [Ajax远程数据（*）](https://blog.csdn.net/fukaiit/article/details/81750755)
6. local Arrays数据源
三、下拉框中列表的样式和行为（Dropdown）
1. 自定义样式
2. 设置选择后不自动关闭列表
3. select2 append的位置
4. 使用`templateSelection `自定义列表样式
5. 多选列表限制选择个数（maximumSelectionLength）
6. 快速清空已选项（allowClear）
7. 可选同时允许用户自行输入（tags）
四、国际化

jQuery-select2通过ajax请求获取远端数据

jQuery-select2通过ajax请求获取远端数据_WWF_HelloWorld-CSDN博客

----------------------------------------------------------------------------------------------------------------------------------------------------

用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。

在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。

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

演示：

由于博客系统的原因，所以只能演示简单的功能。

一、文件需要引入select2.full.js、select2.min.css（3.5.2版本，4.0.1版本）和jquery.1.8.3及以上

最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能allowClear: true

最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）

二、placeholder

placeholder占位提示文字，如果需要清除功能，则必须设置placeholder。

三、加载本地数据

select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
  data: data,
  placeholder:'请选择',
  allowClear:true
})

四、加载远程数据

$("#c01-select").select2({
  ajax: {
    url: "data.json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
      };
    },
    processResults: function (data) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});

说明：

1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

4.escapeMarkup字符转义处理

5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

五、获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data");    //多选
if(res==undefined)
{
     alert("你没有选中任何项");
}
if(reslist.length)
{
     alert("你选中任何项");
}

六、清空选择项和设置不可用

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项

//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七、启用多选

$("#c01-select").select2({
  data:data,
  multiple: true
});

多选演示：

由于博客系统原因只能演示选择

八、下面简单说明新版与老版对比

1、结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）

2、初始化：

//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法
initSelection: function (element, callback) {
   var id = $(element).val();
   var data = { id: id, text: id};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去
   callback(data);
}

//新版，直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3.获取或设置值：select2("val")（老版）；$("select").val()（新版）

推荐使用

var res = $("#id").select2("data");
//返回数组，单选就取res[0]；好处是不仅可以获取id、text，还可以获取其他属性，如res[0].names

4.停用或启用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）

5.主题样式：新版的样式已经更新，但如果想使用老版样式则可以设置 theme: "classic"

十、在绑定插件中使用select2（2017年3月23日更新）

用得较多绑定插件有avalon、Vue等

尽量不要直接绑定到select标签上，当然本地数据的input还是可以的，在 change事件中手动赋值

本文出处：http://www.cnblogs.com/liuxiaobo93/p/5112993.html

select2使用不久，最近遇到一个问题，需要对某一个option设置为不可选，但是一些操作之后恢复可选状态。
1.设置为不可选状态，很容易，
$("#single_select option[value='b']").prop('disabled',true);
$("#single_select").select2();

2.取消option的disabled属性。
$("#single_select option[value='b']").prop('disabled',false);
$("#single_select option[value='b']").removeProp('disabled');
$("#single_select").select2();

但是这样只能给option设置disabled，取消disabled并没有生效。
解决方法：
每次更改了option的disabled属性时候，都需要再次调用该元素的select2()。

-------------------------------------------------------------------------------------------------

隐藏option

jquery的hide方法只是在相应DOM上面增加了样式：display: none

而option不是可绘制的DOM，所以使用hide方法是无效的

两种解决方案：
1.在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉
2.如果想隐藏掉，只能把option从DOM树中去除，然后对去除的option进行缓存，在要显示的时候再将option从缓存中取出加入DOM树中

另一种方法未测试，可参考 Select2: Hide certain options dynamically - Stack Overflow

------------------------------------------------------------------------------------------------

option添加fa-check、fa-close等特殊符号，UI如下：

<div class="form-group">
	<label class="control-label col-md-4">Select Reader:</label>
	<div class="col-md-4">
		<select name="reader_model" id="reader_model" class="form-control">
      <option value="">--SELECT--</option>
    	<option value="LCR-CNSU-14">CSC App Connect</option>
      <option value="LCR-CNSU-15">CSC Card Connect</option>
      <option value="LCR-CNSU-16">CSC App Converter Connect</option>
      <option value="LCR-CNUL-11">CSC Ultra Connect</option>
      <option value="LCR-CNUL-62">CSC Ultra One</option>
     </select>
	</div>
</div>

//Version: 3.5.2    
    var machine_readers = ['CSC App Connect', 'CSC App Converter Connect'];
    $('input:radio[name="coin_support"]').click('coin_support', refresh_data);
    $('#reader_model').select2({
      formatResult: function(result, container, query, escapeMarkup) {
        if (result.id && (machine_readers.indexOf(result.text) != -1)) {
          result.text = "<i class=\"fa fa-check\"></i>&nbsp;" + result.text;
        } else if (result.id) {
          result.text = "<i class=\"fa fa-close\" aria-hidden=\"true\"></i>&nbsp;" + result.text;
        }
        var markup=[];
        window.Select2.util.markMatch(this.text(result), query.term, markup, escapeMarkup);
        return markup.join("");
      },
      escapeMarkup: function (markup) {
        var replace_map = {
          '\\': '&#92;',
          '&': '&amp;',
          '<': '&lt;',
          '>': '&gt;',
          '"': '&quot;',
          "'": '&#39;',
          "/": '&#47;'
        };
        return String(markup).replace(/['\\]/g, function (match) {
          return replace_map[match];
        });
      },
      formatSelection: function (data, container, escapeMarkup) {
        escapeMarkup = function(markup){
          return String(markup).replace(/(<i.*<\/i>&nbsp;)/g, function (match) {
            return "";
          });
        };
        return data ? escapeMarkup(this.text(data)) : undefined;
      },
    });

--------------------
作者：maybe28
来源：CSDN
原文：https://blog.csdn.net/shu580231/article/details/80340207
版权声明：本文为博主原创文章，转载请附上博文链接！

十一、select2 的clear 按钮

初始化选项：allowClear: true，当使用了placeholder: '缺省占位'时，会在选中后的右边出现小叉叉按钮。

如何监听这个clear事件呢？

on('select2:unselecting', function (e) { 
   console.log(clear)
})

ppxin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录