基于jquery实现多选下拉列表

时间：2021-05-25

本文实例为大家分享了jquery实现多选下拉列表展示的具体代码，供大家参考，具体内容如下

<!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 id="form"> <div class="width150"> 可多选年份：<input type="text" id="yearInput" placeholder="请选择年份" readonly> <ul id="yearId" class="hide"> </ul> </div> </form></body><script type="text/javascript" src="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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章