基于jquery实现多选下拉列表

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

！doctype html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题样式ul Li { list-style : none；} .隐藏{display:无}，宽度{宽度： 150px}。宽度150输入[type=' text ']{ width : 100%；高： 32pxborder: 1px固体# cccborder-radius : 4px；左填充： 12px} .宽度150 ul {宽度： 96%；padding: 0 0 0 20pxmargin : 0border: 1px固体# ccc} .宽度li { padding: 5px }。宽度150 Li Li {边框-顶部： 1px实心# CCC}/style/head body form id=' form ' div class=' width 150 '可多选年份：输入类型='text' id='yearInput '占位符='请选择年份readonly ul id=' year id ' class=' hide '/ul/div/form/body脚本类型=' text/JAVAScript ' src=' http : 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(让x在arrive）中){控制台。信息(x)；str=' lilabelinput type=' checkbox ' value=' $ { arr[x]' .id}' data-name='${arr[x]' .名称' ${arr[x]' .姓名}/标签/李`；} $('#yearId ').html(字符串);})();$('#yearInput ').单击(function(){ $(this)).attr('占位符',' ');var name=$('#yearId input ').每个（函数(){//循环遍历复选框var check=$(这)。是(“:已检查”)；//判断是否选中if(check){ name=$(this).attr('数据名') ',';$(这个)。attr('名称'，'年份id ')；}else { $(this).attr('name '，' ')；} });$('#yearInput ').val(name.slice(0，-1))；//去除最后的逗号});$('#yearId ').mouseover(function() { if(！$('#yearId ').有类(' hover '){//类盘旋在下面用来验证是否需要隐藏下拉，没有其他用途$('#yearId ').addClass(')悬停');} }).mouseout(函数(){ $('#yearId ').removeClass(“”悬停');});$(文档)。on('click '，function() { if(！$('#yearInput ').是(' :focus ')！$('#yearId ').有类(' hover '){//如果没有选中输入框且下拉不在盘旋状态var name=$('#yearId input ').每个（函数(){//遍历复选框var check=$(这)。是(“:已检查”)；//判断是否选中if (check) { name=$(this).attr('数据名') ',';$(这个)。attr('名称'，'年份id ')；} else { $(this).attr('name '，' ')；} });$('#yearInput ').val(name.slice(0，-1))；//去除最后的逗号$('#yearId ').添加CLaSS(' hide ')；} else { $('#yearId ').removeClass("隐藏");} });/script/html效果图：

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