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

偏执的太偏执、 2021-10-15 13:37 464阅读 0赞

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

select2组件效果  
效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70][]

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

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>
                 
            </c:forEach>
        </select>
        <input type="button" value="show" onclick="show();">
    </div>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70]: /images/20211015/34e4011a6fac41dc8bc0a8afe9762e9e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，464人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java Swing JCheckBox：复选框组件

一个复选框有选中和未选中两种状态，并且可以同时选定多个复选框。Swing 中使用 JCheckBox 类实现复选框，该类的常用构造方法如下。 JCheckBox()：创

柔光的暖阳◎/ 2024年03月30日 06:37/ 0 赞/ 81 阅读

相关 css复选框样式_使用CSS样式复选框

css复选框样式 Introduction: 介绍： Sometimes we want to develop a website or web page that wo

秒速五厘米/ 2023年03月05日 11:58/ 0 赞/ 47 阅读

相关 Android—复选框和单选框使用

.java文件 package com.example.myapplication; import android.support.v7.app.AppCom

我就是我/ 2022年08月21日 05:58/ 0 赞/ 315 阅读

相关 yii2 复选框筛选显示一个lable控制全选

'format'=> 'raw', //格式化对下面HTML::有用 'label' => '全选',//列标题原先是自带的全选复选框 'headerOptio

阳光穿透心脏的1/2处/ 2022年06月18日 10:00/ 0 赞/ 186 阅读

相关 select下拉框（支持筛选、多选）

[Chosen][] 是一个支持[jQuery][]的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增

今天药忘吃喽~/ 2022年06月14日 06:17/ 0 赞/ 497 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 356 阅读

相关复选下拉框组件

说明需求做报表的时候，筛选条件中需要用到复选下拉框，首先说明： 1. 复选框（复选框）无法满足我的需求，因为可选项有上百个，不可能都直接列在页面上 2. 下拉框（选

柔情只为你懂/ 2022年05月15日 14:06/ 0 赞/ 426 阅读

相关 vue封装复选框组件

前言 > 根据[百度前端技术学院2018 MVVM 学院][2018 MVVM] 中的[ 2.5 表单实现Input、Checkbox组件][2.5 _Input_Che

╰+攻爆jí腚メ/ 2022年01月31日 15:27/ 0 赞/ 830 阅读

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

select2详细介绍与相关文件的下载可以参考 http://select2.github.io/select2/ select2组件效果效果图如下： ![water

偏执的太偏执、/ 2021年10月15日 13:37/ 0 赞/ 465 阅读

相关给element的select添加复选框

需求：要求给select多选的时候，给下拉框前加上复选框样式 element select原样式 ![在这里插入图片描述][watermark_type_ZmFuZ3p

叁歲伎倆/ 2021年07月24日 13:58/ 1 赞/ 954 阅读