jQuery 插件:下拉框控件(select2)

官网:https://select2.org/
官网例子:http://select2.github.io/select2/index.html

引入
方法一:离线引用
通过 Select2(GitHub) 下载对应版本的库。
方法二:CDN 引用

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

有网友提到,要引用jquery.1.8.3及以上版本。否则部分功能无法正常使用。比如:清除功能allowClear: true

简介

select2 插件给我们带来了更加友好的交互方式。

  • 支持关键字检索下拉框值;
  • 样式美观;

select2默认的数据属性是idtext,新版本可以自定义,但还是用默认的比较好。所以提供的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’}]

使用

Html

<!-- 单选:用于 select 控件 -->
<select id="id" name="states" class="select2">
    <option value="" selected>请选择区域</option>
    <option value="1">珠海</option>
    <option value="2">深圳</option>
    <option value="3">澳门</option>
    <option value="4">香港</option>
</select>

<!-- 多选:在 select控件上添加属性 multiple 或 multiple="multiple" -->
<select class="js-example-basic-multiple" name="states" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

初始化

// 页面加载完成后初始化select2控件  
$(function () {  
    // 初始化select2控件
    $("#area").select2();

    // select2()函数可添加相应配置
    $('#area').select2({  
        placeholder: '请选择区域',
        allowClear: true, // 允许清除,选择选项后右侧会多个删除标记,点击可删除选项
        data: data,// select 源数据
        ajax: {}, // 远程加载数据
        multiple: true, // 多选
        theme: "classic", // 旧版主题样式,新版样式已更新
        maximumInputLength: 20, // 允许搜索长度
        minimumResultsForSearch: 20, // 至少20个结果的时候才显示搜索框
        minimumResultsForSearch: "Infinity", // 永久隐藏搜索框
        selectOnClose: true, // 结果显示高亮
        closeOnSelect: false, // select选中关闭下拉框
        selectableOptgroup: true,
        tags: true, // 根据搜索框创建option
        dropdownParent: $('#my_amazing_modal'), // 选择元素追加到下拉框  
        separator: ",", // 分隔符
        templateResult: function (data) {  
            if (data.id === '') { // adjust for custom placeholder values  
                return 'Custom styled placeholder text';  
            }
            return data.text;  
        }
    });

    // 事件:https://select2.org/programmatic-control/events
    // 若 select2:close 无法使用时,试试 select2-close 
}); 

更多参数参考 select2 使用笔记

取值、设值

// 取值:4.0 以下
$("#id").select2('val');
// 设值:4.0 以下
$("#id").select2('val', '1');

// 取值:4.0(二选一)
$("#id").val(); // 取值
$("#id").select2("data"); // 取值推荐:返回数组,单选就取res[0]。好处是不仅可以取id、text,还可以取其他属性,如res[0].names
// 设值:4.0
$("#id").val('1').trigger("change"); // 单选设置默认值1(官方建议书写方式)
$("#id").val([1,2]).trigger("change"); // 多选设置默认值1和2
$("#id").val('1').change(); // 这样写也可以行,但非官方建议的书写方式
var res = $("#id").select2("data")[0] ; // 单选
if(res == undefined) {
    console.info("你没有选中任何项");
}
var reslist=$("#id").select2("data"); // 多选
if(reslist.length) {
    console.info("你选中任何项");
}

添加 option

// 4.0 版本(二选一)
$("#id").append(new Option("Jquery", 10001, false, true));
$("#id").append("<option value='10001'>Jquery</option>");

清空 option

// 操作select标签:4.0 版本(二选一)
$("#id").val(null).trigger("change");
$("#id").val("你的placeholder").trigger("change");

// 操作input标签:4.0 版本(二选一)
$("#id").select2("destroy");
$("#id").val('');

停用或启用

// 4.0 以下
$("select").enable(false);
$("select").enable(true);

// 4.0 用 disabled 实现
$("#id").prop("disabled", false);
$("#id").prop("disabled", true);
下面简单说明新版(4.0)与老版差别(还是以官网为准)

// 结果回调和选中回调名称
formatResult、formatSelection(老版)
templateResult、templateSelection(新版)

// 初始化
initSelection(老版)
dataAdapter(新版)

绑定切换事件

// 不要使用change事件,会影响select2值回显
$("#selData").on("select2:select",function(){
    var data = $(this).val();
    alert(data);
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值