基于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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
如何在vue 中引入使用jquery
Nov 10 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php 伪静态之IIS篇
2014/06/02 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php验证码生成代码
2015/11/11 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
家长学校工作方案
2014/05/07 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
优秀教师个人总结
2015/02/11 职场文书
工作简报范文
2015/07/21 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
高三物理教学反思
2016/02/20 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js