基于jquery实现多选下拉列表
更新时间:2017年08月02日 09:54:10 作者:wodeboke0219
这篇文章主要为大家详细介绍了基于jquery实现多选下拉列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
在WEB项目中,经常会使用到jQuery进行AJAX请求,但是自从使用了.net 3.5以后,以往写的请求语句就有些小问题了,就是返回的始终是xml,而并不是JSON2011-07-07jquery EasyUI的formatter格式化函数代码
以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。2011-01-01jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
这篇文章主要介绍了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码,涉及jQuery控制页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10jQuery position() 函数详解以及jQuery中position函数的应用
position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效,通过本文给大家介绍jQuery position() 函数详解以及jQuery中position函数的应用,感兴趣的朋友一起学习吧2015-12-12
最新评论