韩震博客|关注于学习java&php与交流

JQuery chosen插件,实现select多选

admin 2018年02月05日 web前端 965 0

步骤:1、js,导入chosen.jquery.min.js


2、在select标签上添加 multiple="multiple" 属性


3、添加class=" chosen-select" 属性


即可实现多选


 


默认值选定:


  1、获取标签默认值,根据格式拆分数据


  2、使用  


   


$('.chosen-select').chosen({
            allow_single_deselect : true
        });
         
        $('.chosen-select').trigger("liszt:updated"); 
  


  eg:



<div class="form-group ">
        <label class="col-sm-2 control-label no-padding-right" for="moonComplications">中期并发症:</label>
        <select multiple="multiple" class="col-xs-5 col-sm-3 chosen-select" name="moonComplications">
            <option value="ADIPOSEATROPHY">注射部位皮下脂肪萎缩或增生</option>
            <option value="JOINTILL">关节活动障碍</option>
            <option value="GROWSICK">生长障碍</option>
            <option value="CATARACT">白内障</option>
            <option value="OSTEOPOROSIS">骨质疏松</option>
        </select>
    </div>


var $disease = $('#diseaseTable');
        $('#editDisease').click(
                function() {
                    var objs = $disease.find('span');
                    for ( var index in objs) {
                        var obj = objs.eq(index);
                        if(obj.attr('id') == 'fastComplications' || obj.attr('id') == 'moonComplications' || obj.attr('id') == 'slowComplications'){
                            var value = obj.text();
                            var selValue = value.split(',');
                            for ( var sel in selValue) {
                                $("select[name='"+obj.attr('id')+"']").chosen("destroy");
                                $("select[name='"+obj.attr('id')+"'] option[value='"+selValue[sel]+"']").attr("selected","selected"); 
                                $("select[name='"+obj.attr('id')+"']").trigger("liszt:updated");
                                $("select[name='"+obj.attr('id')+"']").chosen({
                                    allow_single_deselect : true
                                });
                            }
                        }else{
                            $diseaseDialog.find("[name='" + obj.attr('id') + "']")
                                .val(obj.text());
                        }
                    }
                    //打开对话框
                    $diseaseDialog.dialog($.extend(dialogOption, {
                        title : "修改"
                    }));
                    $diseaseDialog.dialog("open");
                });
$('.chosen-select').chosen({
        allow_single_deselect : true
    });
     
    $('.chosen-select').trigger("liszt:updated"); 
  


 清空select 中的默认选中


    $("select[name='name']").val("");
                        $("select[name='name']").chosen("destroy");
                        $("select[name='name']").chosen();


select 搜索功能,切勿忘引入js和css


<select name="name" class="chosen-select" id="id" data-placeholder="提示">
             
                <option value="${value}">${name}</option>
        </select>
 
 
 
$(".chosen-select").chosen();


转载的时候记得写明出处哦!红色火线加油站!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于JQuery chosen插件,实现select多选的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
bootstrap+angularjs实现select多选
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信