js 多选下拉框

最新推荐文章于 2024-08-16 03:38:37 发布

时光奶茶

最新推荐文章于 2024-08-16 03:38:37 发布

阅读量2.9k

点赞数 1

分类专栏： HML 常用

本文链接：https://blog.csdn.net/c_molione/article/details/83061508

版权

常用同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

HML

8 篇文章 0 订阅

订阅专栏

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

 <select data-placeholder=" " class="chosen-select " multiple style="width:350px;" tabindex="4" id="problemTypeId"></select>

success:function (res) {
                var datas = res.obj;
                var list = [];
                for(var i=0;i<datas.length;i++){
                    var data = {"id":datas[i].tId,"text":datas[i].tName}
                    list.push(data);
                }
                $("#problemTypeId").select2({
                    "data": list,
                    templateResult:function(state){
                        //放回值将作为li元素的html，所以多个空格只会展示一个，内联元素默认的
                        console.log(state);
                        if(true){
                            //state.text不能放在尾部，否则不会显示（原因未知）
                            var liHtml = $('<span style="padding-left:2em">'+state.text+'</span>');
                            return liHtml;
                        }else
                            return state.text;
                    }
                });
                $(".singleSelect2").on("change",function(){
                    console.log($(".singleSelect2").val())
                })
            }