基于jquery实现多选下拉列表


Posted in jQuery onAugust 02, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
简述jQuery Easyui一些用法
Aug 01 #jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
You might like
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
js几个验证函数代码
2010/03/25 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Node.js简单入门前传
2017/08/21 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
python中关于数据类型的学习笔记
2020/07/19 Python
浅析python连接数据库的重要事项
2021/02/22 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
人事文员岗位职责
2014/02/16 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
罚款通知怎么写
2015/04/22 职场文书
少先队工作总结2015
2015/05/13 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL