select2下拉列表插件实现select单选和多选

单选
<!--课程选择select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="form-group col-md-4" style="margin-bottom:20px;">
    <label for="kid">所属课程<span style="color:red;">*</span></label>
    <select name="kcid" id="kcid" class="form-control" style="width:80%;" {if !empty($info['kcid'])} disabled="disabled" {/if} >
    <option value="0">请选择课程</option>
    {foreach key=key item=val from=$kclist}
    <option value="{$val['id']}" {if (!empty($info['kcid']) && $val['id']==$info['kcid']) || ($val['id']==$kcid)}selected="selected"{/if} >{$val['id']} => {$val['mingcheng']}</option>
    {/foreach}
    </select>
</div>
<script>
    $('#kcid').select2();
</script>

多选
<!--知识点select2-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<div class="form-group" style="margin-bottom:10px;">
    <label for="codeempiricvalue_label" class="control-label">发布班级</label>
    <div>
        <select style="width: 30%;" id="id_select2_points" name="points[]" multiple="multiple">
            <option name="points" value="111">111</option>
            <option name="points" value="222">222</option>
            <option name="points" value="333">333</option>
        </select>
    </div>
</div>
<script>
    $('#id_select2_points').select2({
        placeholder: '请选择课程标签(可多选，可搜索)'
    });
</script>