<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul li{ list-style: none; } .hide{display: none} .width150{ width: 150px; } .width150 input[type="text"]{ width: 100%; height: 32px; border: 1px solid #ccc; border-radius: 4px; padding-left: 12px; } .width150 ul{ width: 96%; padding: 0 0 0 20px; margin: 0; border: 1px solid #ccc; } .width150 li{ padding: 5px; } .width150 li+li{ border-top: 1px solid #ccc; } </style> </head> <body> <form> <div> 可多选年份：<input type="text" placeholder="请选择年份" readonly> <ul> </ul> </div> </form> </body> <script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> <script> (function(){ var str = ''; var arr = { 0 : {name:'2015',id:0}, 1 : {name:'2016',id:0}, 2 : {name:'2017',id:0} }; for (let x in arr){ console.info(x); str += `<li><label><input type="checkbox" value="${arr[x].id}" data-name="${arr[x].name}">${arr[x].name}</label></li>`; } $('#yearId').html(str); })(); $("#yearInput").click(function(){ $(this).attr('placeholder',''); var name = ''; $('#yearId input').each(function () {//循环遍历checkbox var check=$(this).is(':checked');//判断是否选中 if(check){ name += $(this).attr('data-name')+','; $(this).attr('name',"yearId"); }else { $(this).attr('name',""); } }); $("#yearInput").val(name.slice(0,-1));//去除最后的逗号 }); $("#yearId").mouseover(function() { if (!$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉，没有其他用途。 $("#yearId").addClass('hover'); } }).mouseout(function(){ $("#yearId").removeClass('hover'); }); $(document).on('click',function() { if (!$("#yearInput").is(":focus") && !$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态。 var name = ''; $('#yearId input').each(function () {//遍历checkbox var check = $(this).is(':checked');//判断是否选中 if (check) { name += $(this).attr('data-name') + ','; $(this).attr('name', "yearId"); } else { $(this).attr('name', ""); } }); $("#yearInput").val(name.slice(0, -1));//去除最后的逗号 $("#yearId").addClass('hide'); } else { $("#yearId").removeClass('hide'); } }); </script> </html>
效果图：
