基于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实现图片放大点击切换
Jun 06 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python显示天气预报
2014/03/02 Python
python获取文件扩展名的方法
2015/07/06 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
对Python函数设计规范详解
2019/07/19 Python
Django 框架模型操作入门教程
2019/11/05 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
新学期国旗下演讲稿
2014/05/08 职场文书
绿色环保标语
2014/06/12 职场文书
经营理念口号
2014/06/21 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
MySQL注入基础练习
2021/05/30 MySQL
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python