基于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设置图片等比例缩小的方法
Apr 29 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python游戏开发的五个案例分享
2020/03/09 Python
python自动下载图片的方法示例
2020/03/25 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
招商业务员岗位职责
2013/12/16 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
机关单位动员会主持词
2014/03/20 职场文书
土地转让协议书范本
2014/04/15 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
校车司机安全责任书
2015/05/11 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫