模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）
阿新 • • 發佈：2017-05-10
bbb n) nowrap pac inner sel cte spl innerhtml
最近需要一個下拉多選，本來想偷懶的，所以在網上百度了一番，最終還是發現沒有一個符合自己要求的，所以我自己寫了一個插件。下面是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>
代碼中有註釋，如果有看不懂或者出現問題的可以留言問我，有空一定解答。
模擬select下拉框之多選（數據源采用模擬Ajax數據--原創）