SELECT2自定义下拉框

最新推荐文章于 2024-07-24 18:20:33 发布

许跃飞

最新推荐文章于 2024-07-24 18:20:33 发布

阅读量1.4k

点赞数

分类专栏：前端开发 jquery

本文链接：https://blog.csdn.net/weixin_41395648/article/details/84403021

版权

前端开发同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

SELECT2自定义下拉框

安装

参考：Getting Started | Select2 - The jQuery replacement for select boxes

快速使用

html:

<select class="js-example-basic-single">
    <option value="3" selected="selected">3期</option>
    <option value="4">4期</option>
    <option value="5">5期</option>
    <option value="6">6期</option>
</select>

$(document).ready(**function**() {
    $('.js-example-basic-single').select2();
});

配置

多选：<select multiple=“multiple”>
配置参数：

$('.my_test').select2({
    minimumResultsForSearch:Infinity,//不显示多选框
    placeholder: '请选择期数',//占位符
    allowClear:**true**,//可以被点击删除
    closeOnSelect:**true**,//如果为false，则选择后不关闭
    width:'50%',//定义宽度
    // theme:"classic"//自定义外观
});
$('.js-example-disabled-multi').prop("disabled",true)//使select无法被选中