基于jquery实现多选下拉列表

来源：动视网责编：小OO 时间：2020-11-27 22:33:28

基于jquery实现多选下拉列表

本文实例为大家分享了jquery实现多选下拉列表展示的具体代码，供大家参考，具体内容如下：<。$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉，没有其他用途。$("#yearId").addClass('hover')；} }).mouseout(function(){ $("#yearId").removeClass('hover')；})；$(document).on('click'，function() { if (。$("#yearInput").is("：focus") &&。$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态效果图。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了jquery实现多选下拉列表展示的具体代码，供大家参考，具体内容如下：<。$("#yearId").hasClass('hover')){//类hover在下面用来验证是否需要隐藏下拉，没有其他用途。$("#yearId").addClass('hover')；} }).mouseout(function(){ $("#yearId").removeClass('hover')；})；$(document).on('click'，function() { if (。$("#yearInput").is("：focus") &&。$("#yearId").hasClass('hover')) {//如果没有选中输入框且下拉不在hover状态效果图。

本文实例为大家分享了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实现多选下拉列表

推荐度：

点击下载本文 文档为doc格式

标签：多选实现下拉列表

热门焦点

基于jquery实现多选下拉列表

基于jquery实现多选下拉列表

基于jquery实现多选下拉列表

最新推荐

猜你喜欢

热门推荐