基于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 Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
Jquery Datatables的使用详解
Jan 30 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正则表达式之定界符和原子介绍
2012/10/05 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
用Python解决计数原理问题的方法
2016/08/04 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python实现简单http服务器功能
2018/09/17 Python
详解python运行三种方式
2019/05/13 Python
django 中QuerySet特性功能详解
2019/07/25 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
python爬取代理ip的示例
2020/12/18 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
公证委托书
2014/08/01 职场文书
合伙经营协议书范本
2014/09/13 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
python Tkinter模块使用方法详解
2022/04/07 Python