用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 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
Ext 今日学习总结
Sep 19 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
TypeScript之调用栈的实现
Dec 31 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python学生信息管理系统修改版
2018/03/13 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
override和overload的区别
2016/03/09 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
诚信贷款承诺书
2014/05/30 职场文书
班子四风对照检查材料
2014/08/21 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python