美文网首页
带搜索的多选下拉框(select2)使用方法

带搜索的多选下拉框(select2)使用方法

作者: 河工狗之王二狗 | 来源:发表于2018-09-10 09:11 被阅读0次
    1. 引入select2的css和js
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/select2/select2.min.css">
    <script src="${pageContext.request.contextPath}/resources/select2/select2.min.js"></script>
    <script src="${pageContext.request.contextPath}/resources/select2/i18n/zh-CN.js"></script>
    
    1. dom结构

    在select上加上

    class="select2" 
    

    如果是多选,再加上

    multiple = "multiple"
    
    1. 初始化
    $("#centerCourse").select2({
        placeholder: '请选择xxxxx',
        multiple:true,
        language: "zh-CN",
        allowClear:true,
        closeOnSelect:false
    });
    
    1. 效果图
    image.png

    楼主还是稍微的改了改他的样式,要不然觉得实在是有点丑。。。。。。

    相关文章

      网友评论

          本文标题:带搜索的多选下拉框(select2)使用方法

          本文链接:https://www.haomeiwen.com/subject/xzmjgftx.html