用jQuery实现可输入多选下拉组合框实例代码
【写在前面的话】网站上很多用各种插件，比如依赖bootstrap的bootstrap-select插件等。虽然这些框架可以实现很多功能，但因为在实际项目中，可能只会用到其中的某个功能，若是一概引入，会导致整个js加载过于笨重。比如前面提到的bootstrap-select插件，在不压缩的情况下，达到300多k。因此，为了实现一个可填写的下拉框有点得不偿失。
基于这种原因，于是私下用jquery写了一个比较简单的多选下拉可填写组合框。
container{
margin:20pxauto;
padding:015px;
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:1pxsolidsilver;
border-left:none;
float:left;
padding:0;
margin:0;
box-sizing:border-box;
cursor:pointer;
}
.dropDown-menu{
margin:0;
padding:015px10px;
width:100%;
border:1pxsolidsilver;
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;
}
<divclass="container"> <spanclass="text-container">最爱的水果</span> <divclass="multipleSelectselectContainer"> <inputtype="text"class="selectedContent"> <divclass="dropDown-toggle">选择</div> <ulclass="dropDown-menudsn"> <liclass="items"> <spanclass="isSelectedText">苹果</span> <spanclass="isSelected"><inputtype="checkbox"></span> </li> <liclass="items"> <spanclass="isSelectedText">梨</span> <spanclass="isSelected"><inputtype="checkbox"></span> </li> <liclass="items"> <spanclass="isSelectedText">橘子</span> <spanclass="isSelected"><inputtype="checkbox"></span> </li> <listyle="text-align:right"> <buttontype="button"class="confirmSelect">确定</button> </li> </ul> </div> </div>
$('.isSelectedinput[type=checkbox]').on('click',function(){
varselectedItems=$(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split('');
varthisItem=$(this).parent().prev().text();
varisExisted=0;
varisChecked=$(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浏览器测试后同样可是正常使用。