模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）
Posted BetiaStar
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟select下拉框之多选（数据源采用模拟Ajax数据--原创）相关的知识，希望对你有一定的参考价值。
最近需要一个下拉多选，本来想偷懒的，所以在网上百度了一番，最终还是发现没有一个符合自己要求的，所以我自己写了一个插件。下面是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); $(\'多选下拉框回显无内容