用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的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
深入了解JS之作用域和闭包
Jun 16 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
php防注
2007/01/15 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
浅析PHP绘图技术
2013/07/03 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js图片预加载示例
2014/04/30 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python绘制直线的方法
2018/06/30 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
django框架创建应用操作示例
2019/09/26 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
总结几个非常实用的Python库
2021/06/26 Python