django
Source
Edit
History

在adminlte中使用select2

引入css和js

1
2
3
<link rel="stylesheet" href="{% static 'adminlte/plugins/select2/css/select2.min.css' %}">
<link rel="stylesheet" href="{% static 'adminlte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css' %}">
<script src="{% static 'adminlte/plugins/select2/js/select2.full.min.js' %}"></script>

基本使用

  • html 复制的时候把span标签的内容去掉

1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-group">
    <label><a style="color: red;">*</a>标签</label>
    <div class="select2-purple">
    <select class="select2bs4 select2-hidden-accessible" multiple="" data-dropdown-css-class="select2-purple" data-placeholder="Select a State" style="width: 100%;" data-select2-id="23" tabindex="-1" aria-hidden="true" name="event_label" id="event_label">
        <option vlaue="材料">材料</option>
        <option vlaue="学习">学习</option>
        <option vlaue="问题处理">问题处理</option>
        <option vlaue="会议">会议</option>
        <option vlaue="其它">其它</option>
    </select>
    </div>
</div>

  • js

1
$("#event_label").select2()

默认值

1
2
3
4
5
6
# 默认单选
$('#event_label').val("Low")
# jquery可以把字符串转换为数组
arrValue = "{{ event_label }}".split(';');
# 多选时，传入数组，可以默认选中多个
$('#event_label').val(arrValue).trigger('change')