用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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
微信小程序实现锚点跳转
Nov 23 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
js获取页面description的方法
2015/05/21 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
django模板语法学习之include示例详解
2017/12/17 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
医药销售求职信范文
2014/02/01 职场文书
药品促销活动方案
2014/02/14 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
有趣的广告词
2014/03/18 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
运动会方阵口号
2014/06/07 职场文书