zoukankan      html  css  js  c++  java
  • select2多选设置select多选,select2取值和赋值

    版权声明:转载请注明出处 https://blog.csdn.net/wengedexiaozao/article/details/83753825
    select2设置select多选,select2取值和赋值,作为筛选条件的时候,取值相对简单,把选中的id值转为字符串传给后端查询,查询之后会刷新页面,为了在下拉框中显示刚刚选中的值,就需要给select赋值,可以将刚才传给后端的字符串再传回前端,然后转为一位数组,再赋值给select2就会显示刚刚选中的值,赋值方法:$('#id').val(arr).trigger('change'),id为select的id属性,这里的arr是刚才从后端传回前端的id转成的一位数组。

    select2设置select多选,select2取值和赋值,首先需要引入select2的js文件,select2官网地址:https://select2.org/

    //select2html代码设置选项,list为后端查询出来的选项,循环赋值

     <select name="id" id="id" multiple="multiple">
            <option value="0">请选择部门</option>
            <volist name="list" id="vo">
                <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected" </eq>>{$vo.name}</option>
            </volist>
        </select>

        //可以另外设置一个隐藏的input框来存select选中的id,方便传给后端

     <input type="hidden" id="select_id" name="select_id"/>


    //select2插件初始化

      $("#id").select2({
            language : "zh-CN",
            minimumInputLength : 0,
            placeholder:"可多选",//默认值
            allowClear: true,
        })

        //select2插件赋值 

     var select_id = $("#select_id").val();
        arr = select_id.split(",");//注意:arr为select的id值组成的数组
        $('#id').val(arr).trigger('change');

        //select2多选,取值,在下拉框中选中以后,获取到选择的id值

    $('#id').change(function(){
                var o=document.getElementById('id').getElementsByTagName('option');
                var all="";
                console.log(o[1]);
                for(var i=0;i<o.length;i++){
                    if(o[i].selected){
                        all+=o[i].value+",";
                    }
                }
                
                all = all.substr(0, all.length - 1);//去掉末尾的逗号
                $("#bumen").val(all);//赋值给隐藏的文本框
            })


    select2设置select多选,select2取值和赋值大概就这些了,也是网上找了很多资料,尝试了很多次,因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥,最开始以为是数据,text,赋值了一些字符串,所以一直没用。
    ---------------------
    作者:稳哥的小灶
    来源:CSDN
    原文:https://blog.csdn.net/wengedexiaozao/article/details/83753825
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    卡诺图简单逻辑化简与五变量卡诺图化简
    flash读写学习笔记与spi接口及简单测试验证(三)
    疯狂的订餐系统软件需求分析挑战之旅4
    .NET(C#):谈谈各种结束进程的方法
    疯狂的订餐系统软件需求分析挑战之旅3
    疯狂的订餐系统软件需求分析挑战之旅5
    找零
    ASP.NET MVC3 Razor视图引擎基础语法
    做了8年软件开发了,年龄大了,想要转行做测试,大家给点意见
    想搞一个 代码仓库的东西,不知道大家有没有兴趣啊
  • 原文地址:https://www.cnblogs.com/sherryweb/p/11132672.html
Copyright © 2011-2022 走看看