【前端】Select2组件下拉框实现多选，及取值赋值；

Select2下拉框实现多选，及取值赋值。

需求：为了完成下拉框可搜索、多选，及取值赋值。

1、引入js文件

 <link rel="stylesheet" href="${ctx}/static/select2/select2.min.css"></link>
 <script type="text/javascript" charset="utf-8" src="${ctx}/static/select2/select2.js"></script>

2、jsp多选框

<td>
    <select multiple="multiple" name="moZhr" id="moZhr" >
        <option value="0">知会人</option>
        <c:forEach items="${userList}" var="user">
        <option value="${user.userName}" >${user.showName}(${user.userName})</option>
        </c:forEach>
    </select>
    <input style=" border:0.5px solid #808080" name="moZhr1" id="moZhr1" type="hidden"/>
</td>

3、js

<script type="text/javascript">
  $(function(){
  //多选
 $("#moZhr").select2({
                tags: true,
                maximumSelectionLength: 3  //最多能够选择的个数
            });
  })
</script>

4、取值、赋值

    var b = $("#moZhr option:selected");//对象
    var moZhr=''
    for(n=0;n<b.length;n++){
        moZhr+= b[n].value+',';//将数组拼成字符串
    }
    $("#moZhr1").val(moZhr);