基于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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现全选按钮
Jan 01 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设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
英语自荐信范文
2013/12/11 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
小学教师评语大全
2014/04/23 职场文书
大学生新学期计划书
2014/04/28 职场文书
党员创先争优活动总结
2014/05/04 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
公司合作意向书范文
2014/07/30 职场文书
争先创优心得体会
2014/09/12 职场文书
业务员管理制度范本
2015/08/06 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python