最近需要一个下拉多选，本来想偷懒的，所以在网上百度了一番，最终还是发现没有一个符合自己要求的，所以我自己写了一个插件。下面是GIF动态效果图展示
相信大家已经看到效果了，接下来就是我的代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } #test{ margin:20px 10px; } .clearfix:before, .clearfix:after{ content: ''; display: block; overflow: hidden; clear: both; height: 1px; } .fruitTitle{ float: left; height: 30px; line-height: 30px; margin: 0 5px 0 20px; } .box1{ position: relative; float: left; height: 30px; } .fruit1_ul1{ display: inline-block; width:150px; height: 30px; line-height: 30px; padding: 0 0 0 8px; border:1px solid #bbb; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*文本不换行,这样超出一行的部分被截取,显示...*/ cursor: pointer; } .multiFruit1{ display: none; position: absolute; left:0; top:30px; min-width: 148px; padding: 0 5px; background: #fff; border:1px solid #bbb; margin-top: -1px; overflow-x: hidden; z-index: 10; max-height: 150px; } .multiFruit1 li{ white-space:nowrap; height: 30px; line-height: 30px; } .multiFruit1 input, .multiFruit1 label{ cursor: pointer; margin: 2px 4px 0 0; vertical-align: middle; } .txt_p{ display: none; position: absolute; left: 0; border: 1px solid #bbb; text-align: right; height: 40px; line-height: 40px; z-index: 10; background: #fff; } .select_ok1{ padding: 7px 9px; font-size: 14px; border-radius: 5px; border:none; margin:-2px 5px 0 0; background: #337ab7; color: #fff; cursor: pointer; } </style> </head> <body> <form action="#" method="" id="test" class="clearfix"> <!-- 隐藏域存储所选水平品种的ID --> <input type="hidden" name="fruit1" id="fruits"/> <strong class="fl fruitTitle">水果品种</strong> <div class="box1"> <span class="fruit1_ul1">请选择水果</span> <ul class="multiFruit1"> </ul> </div> </form> <script> //JSON对象fruit_variety模拟Ajax数据源 var fruit_variety = [{fruitID:1,fruitName:"苹果"},{fruitID:2,fruitName:"梨"},{fruitID:3,fruitName:"西瓜"},{fruitID:4,fruitName:"哈密瓜"},{fruitID:5,fruitName:"草莓"},{fruitID:6,fruitName:"龙眼"},{fruitID:7,fruitName:"火龙果"},{fruitID:8,fruitName:"樱桃"},{fruitID:9,fruitName:"橘子"},{fruitID:10,fruitName:"水蜜桃"}]; </script> <script src="jquery-1.7.2.js"></script> <script> $(function(){ //生成多选下拉 function multiSelect(obj1,obj2){ for(var i=0;i<obj2.length;i++){ var input = document.createElement('input'); input.setAttribute('type','checkbox'); input.setAttribute('name','fruit_name'); input.setAttribute('id',obj2[i].fruitID); input.setAttribute('value',obj2[i].fruitID); var label = document.createElement('label'); label.setAttribute('for',obj2[i].fruitID); label.innerHTML = obj2[i].fruitName; var li = document.createElement('li'); li.append(input); li.append(label); $(obj1).append(li); } var btn = document.createElement('input'); btn.setAttribute("type","button"); btn.className = 'select_ok1'; btn.setAttribute("value","确定"); var p = document.createElement('p'); p.className = 'txt_p'; p.append(btn); $(obj1).parent().append(p); } multiSelect('.multiFruit1',fruit_variety); $(document).click(function(){ $('.multiFruit1').hide();//隐藏下拉框 $('.txt_p').hide();//隐藏确认按钮 $('.multiFruit1 input').attr('checked',false); var v = $('#fruits').val(); if(v != ''){ //获取保存的选中值,并保存默认选中 var selectedNum = v.split(','); for(var i=0;i < selectedNum.length;i++){ for(var j=0;j<$('.multiFruit1 input').size();j++){ if($('.multiFruit1 input').eq(j).val() == selectedNum[i]){ $('.multiFruit1 input').eq(j).attr("checked",true); } } } } }) $('.box1').click(function(e){ e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); }else{ e.cancelBubble = true; //IE } var w = $('.multiFruit1').innerWidth(); var t = $('.multiFruit1').innerHeight() + $('.fruit1_ul1').innerHeight(); $('.txt_p').css('width',w); $('.txt_p').css('top',t); $('.multiFruit1').show(); }) $('.fruit1_ul1').click(function(){ $('.txt_p').show(); }) $('.select_ok1').click(function(e){ e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); }else{ e.cancelBubble = true; //IE } $('.multiFruit1').hide(); $('.txt_p').hide(); var value = ''; var str = ''; //将选中的值保存到value for(var i=0;i<$('input[name="fruit_name"]').size();i++){ if($('input[name="fruit_name"]').eq(i).attr('checked')){ value += ',' + $('input[name="fruit_name"]').eq(i).attr('value'); str += ',' + $('input[name="fruit_name"]').eq(i).siblings('label').html(); } } //采用substr去除第一个逗号分隔符 value = value.substr(1); str = str.substr(1); //将value的值赋值给input隐藏域 $('#fruits').val(value); //将str的值赋值给显示框隐藏域 $('.fruit1_ul1').html(str); }) }) </script> </body> </html>
代码中有注释，如果有看不懂或者出现问题的可以留言问我，有空一定解答。