基于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平滑滚动到顶部插件使用详解
May 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现手风琴特效
Jan 11 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二维数组的去重问题解析
2011/07/17 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php jsonp单引号转义
2014/11/23 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
php组合排序简单实现方法
2016/10/15 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python常用知识点汇总
2016/05/08 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
单位租车协议书
2015/01/29 职场文书
股东协议书范本2016
2016/03/21 职场文书
七年级作文之下雨天
2019/12/23 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Python上下文管理器Content Manager
2021/06/26 Python
Python+Appium自动化测试的实战
2021/06/30 Python
Python面向对象编程之类的概念
2021/11/01 Python