可输入筛选复选框select2组件的使用

最新推荐文章于 2024-01-24 18:52:45 发布

深山猿

最新推荐文章于 2024-01-24 18:52:45 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： select2 组件

本文链接：https://blog.csdn.net/h2604396739/article/details/99545580

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

select2详细介绍与相关文件的下载可以参考 http://select2.github.io/select2/

select2组件效果
效果图如下：

即支持多选，支持根据输入进行相似查询，支持值初始化，使用及其方便。

1 下载（http://select2.github.io/select2/）并引入相关的文件，包括jquery和select2的文件

  <script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
    <script src="../resource/select2/js/select2.js"></script>
    <link rel="stylesheet" href="../resource/select2/css/select2.css">
    <script src="../resource/select2/js/select2.min.js"></script>
    <link rel="stylesheet" href="../resource/select2/css/select2.min.css">

2 后台数据请求，并跳转到jsp

    @RequestMapping(value="/reportset/testselec2.action")
    public String testselec2(ModelMap modelMap,ServletResponse response ){
        List<ReportsetDto> reportsetDtos = reportsetService.listReportset("1=1", 1, 30);
        modelMap.put("list", reportsetDtos);
        return "reportset/select2test-exp";
    }

3 jsp页面，包括获取选中内容，绑定事件，初始化等

<script language="javascript">
    $(document).ready(function() {
        // select2模式化
        $("#e1").select2();
        // 根据value来初始化
        $("#e1").val(["0","1","2"]).select2();
        // 绑定change事件
        $("#e1").on("change", show);
    });

    // 弹出当前选择的value
    function show(){
        // 获取选中的对象
        var reslist1=$("#e1").select2("data"); //多选,获取object
        // 获取选中的对象的值，逗号拼接
        var reslist=$("#e1").val(); //多选,获取object
        alert(reslist);
    }
</script>

<body style="background-color: #ffffff;">
<div>
    <select id="e1"   multiple style="width: 200px">
        <option   value="1">Alabama</option>
        <option  value="2">byoming</option>
        <option value="3">Chinese</option>
        <option value="4">dhina</option>
        <c:forEach var="key" items="${list}" varStatus="keyIndex">
            <option value="${key.id}">${key.name}</option>
            &nbsp;
        </c:forEach>
    </select>
    <input type="button" value="show" onclick="show();">
</div>
</body>