用jquery实现可输入多选下拉组合框
【写在前面的话】网站上很多用各种插件，比如依赖bootstrap的bootstrap-select插件等。虽然这些框架可以实现很多功能，但因为在实际项目中，可能只会用到其中的某个功能，若是一概引入，会导致整个js加载过于笨重。比如前面提到的bootstrap-select插件，在不压缩的情况下，达到300多k。因此，为了实现一个可填写的下拉框有点得不偿失。
基于这种原因，于是私下用jquery写了一个比较简单的多选下拉可填写组合框。
CSS Code:
1 container{ 2 margin: 20px auto; 3 padding:0 15px; 4 width: 50%; 5 height:300px; 6 box-sizing: border-box; 7 } 8 .text-container{ 9 display: inline-block; 10 float:left; 11 width: 15%; 12 height: 32px; 13 line-height: 32px; 14 box-sizing: border-box; 15 } 16 .selectContainer{ 17 width: 70%; 18 height:200px; 19 float:left; 20 position: relative; 21 padding:0; 22 margin:0; 23 box-sizing: border-box; 24 } 25 .selectedContent{ 26 width:85%; 27 height: 25px; 28 float:left; 29 } 30 .dropDown-toggle{ 31 width:14%; 32 height:31px; 33 line-height: 31px; 34 text-align: center; 35 border: 1px solid silver; 36 border-left:none; 37 float:left; 38 padding:0; 39 margin:0; 40 box-sizing: border-box; 41 cursor: pointer; 42 } 43 .dropDown-menu{ 44 margin:0; 45 padding:0 15px 10px; 46 width:100%; 47 border:1px solid silver; 48 border-top: none; 49 box-sizing: border-box; 50 list-style: none; 51 position: absolute; 52 top:31px; 53 right:0; 54 } 55 .items{ 56 margin-top:8px; 57 padding: 2px; 58 cursor: pointer; 59 } 60 .items:hover{ 61 background: #ddd; 62 } 63 .isSelectedText{ 64 display: inline-block; 65 width:90%; 66 } 67 .dsn{ 68 display: none; 69 } 70
HTML Code:
1 <div class="container"> 2 <span class="text-container">最爱的水果</span> 3 <div class="multipleSelect selectContainer"> 4 <input type="text" class="selectedContent"> 5 <div class="dropDown-toggle">选择</div> 6 <ul class="dropDown-menu dsn"> 7 <li class="items"> 8 <span class="isSelectedText">苹果</span> 9 <span class="isSelected"><input type="checkbox"></span> 10 </li> 11 <li class="items"> 12 <span class="isSelectedText">梨</span> 13 <span class="isSelected"><input type="checkbox"></span> 14 </li> 15 <li class="items"> 16 <span class="isSelectedText">橘子</span> 17 <span class="isSelected"><input type="checkbox"></span> 18 </li> 19 <li style="text-align: right"> 20 <button type="button" class="confirmSelect">确定</button> 21 </li> 22 </ul> 23 </div> 24 </div>
JavaScript Code:
1 $('.isSelected input[type=checkbox]').on('click', function(){ 2 var selectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' '); 3 var thisItem = $(this).parent().prev().text(); 4 var isExisted = 0; 5 var isChecked = $(this).is(':checked'); 6 if(isChecked){ 7 selectedItems.map(function(item, index){ 8 if(item === thisItem){ 9 isExisted++ 10 } 11 }); 12 if(!isExisted){ 13 selectedItems.push(thisItem) 14 } 15 } 16 else{ 17 selectedItems.map(function(item, index){ 18 if(item === thisItem){ 19 selectedItems.splice(index, 1); 20 } 21 }); 22 } 23 $(this).parents('.dropDown-menu').prevAll('.selectedContent').val(selectedItems.join(' ')); 24 }) 25 $('.confirmSelect').on('click', function(){ 26 $(this).parents('.dropDown-menu').addClass('dsn'); 27 }) 28 $('.dropDown-toggle').on('click', function(){ 29 $(this).next().toggleClass('dsn') 30 });
由于本组件中使用了数组的map方法，可能此方法在ie中不能兼容。由于鄙人电脑ie无法打开，用360浏览器测试后同样可是正常使用。
请大家多多指教。
