基于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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery操作动画完整实例分析
Jan 10 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环境――Appserv
2006/12/13 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
Python中%r和%s的详解及区别
2017/03/16 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python如何统计代码运行的时长
2019/07/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
python 调整图片亮度的示例
2020/12/03 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
文科生自我鉴定
2014/02/15 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
Python打包为exe详细教程
2021/05/18 Python