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

最新推荐文章于 2023-05-22 17:02:23 发布

原创最新推荐文章于 2023-05-22 17:02:23 发布 · 3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了如何利用Select2库创建一个多选下拉框，支持搜索功能，并限制了最多可选项目数量。通过在jsp页面中引入Select2的css和js文件，设置select元素的属性，然后使用JavaScript进行初始化配置。在取值和赋值部分，展示了如何获取选定选项并将其值转化为逗号分隔的字符串，以便于后续处理。

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);