用jQuery实现可输入多选下拉组合框实例代码


Posted in Javascript onJanuary 18, 2017

【写在前面的话】网站上很多用各种插件,比如依赖bootstrap的bootstrap-select插件等。虽然这些框架可以实现很多功能,但因为在实际项目中,可能只会用到其中的某个功能,若是一概引入,会导致整个js加载过于笨重。比如前面提到的bootstrap-select插件,在不压缩的情况下,达到300多k。因此,为了实现一个可填写的下拉框有点得不偿失。

基于这种原因,于是私下用jquery写了一个比较简单的多选下拉可填写组合框。

container{
   margin: 20px auto;
   padding:0 15px;
   width: 50%; 
   height:300px;
   box-sizing: border-box;  
  }
  .text-container{
   display: inline-block;
   float:left;
   width: 15%;
   height: 32px;
   line-height: 32px;
   box-sizing: border-box;
  }
  .selectContainer{
   width: 70%;
   height:200px;
   float:left;
   position: relative;
   padding:0;
   margin:0;
   box-sizing: border-box;
  }
  .selectedContent{
   width:85%;
   height: 25px;
   float:left;   
  }
  .dropDown-toggle{
   width:14%;
   height:31px;
   line-height: 31px;
   text-align: center;
   border: 1px solid silver;
   border-left:none;
   float:left;
   padding:0;
   margin:0;
   box-sizing: border-box;
   cursor: pointer;
  }
  .dropDown-menu{
   margin:0;
   padding:0 15px 10px;
   width:100%;
   border:1px solid silver;
   border-top: none;
   box-sizing: border-box;
   list-style: none;
   position: absolute;
   top:31px;
   right:0;
  }
  .items{
   margin-top:8px;
   padding: 2px;
   cursor: pointer;
  }
  .items:hover{
   background: #ddd;
  }
  .isSelectedText{
   display: inline-block;
   width:90%;
  }
  .dsn{
   display: none;
  }
<div class="container">
 <span class="text-container">最爱的水果</span>
 <div class="multipleSelect selectContainer">
  <input type="text" class="selectedContent">
  <div class="dropDown-toggle">选择</div>
  <ul class="dropDown-menu dsn">
   <li class="items">
    <span class="isSelectedText">苹果</span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li class="items">     
    <span class="isSelectedText">梨</span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li class="items">
    <span class="isSelectedText">橘子</span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li style="text-align: right">
    <button type="button" class="confirmSelect">确定</button>
   </li>
  </ul>
 </div>
</div>
$('.isSelected input[type=checkbox]').on('click', function(){
   var selectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' ');
   var thisItem = $(this).parent().prev().text();
   var isExisted = 0;
   var isChecked = $(this).is(':checked');
   if(isChecked){
    selectedItems.map(function(item, index){
     if(item === thisItem){
      isExisted++
     }
    });
    if(!isExisted){
     selectedItems.push(thisItem)
    }
   }
   else{
    selectedItems.map(function(item, index){
     if(item === thisItem){
      selectedItems.splice(index, 1);
     }
    });
   }
   $(this).parents('.dropDown-menu').prevAll('.selectedContent').val(selectedItems.join(' '));
  })
  $('.confirmSelect').on('click', function(){
   $(this).parents('.dropDown-menu').addClass('dsn');
  })
  $('.dropDown-toggle').on('click', function(){
   $(this).next().toggleClass('dsn')
  });

由于本组件中使用了数组的map方法,可能此方法在ie中不能兼容。由于鄙人电脑ie无法打开,用360浏览器测试后同样可是正常使用。

Javascript 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
js实现车辆管理系统
Aug 26 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 #Javascript
微信小程序实现图片预加载组件
Jan 18 #Javascript
JavaScript原生节点操作小结
Jan 17 #Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 #Javascript
easyUI combobox实现联动效果
Jan 17 #Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 #Javascript
React Router基础使用
Jan 17 #Javascript
You might like
资料注册后发信小技巧
2006/10/09 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
《问银河》教学反思
2014/02/19 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
大学生自我评价范文
2015/03/03 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书