美文网首页
带搜索的多选下拉框(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