怎么使用jQuery实现可输入多选下拉组合框
这篇文章主要介绍“怎么使用jQuery实现可输入多选下拉组合框”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用jQuery实现可输入多选下拉组合框”文章能帮助大家解决问题。
成都创新互联公司于2013年创立，先为连山等服务建站，连山等地企业，进行企业商务咨询服务。为连山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
代码如下：
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 > <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浏览器测试后同样可是正常使用。
关于“怎么使用jQuery实现可输入多选下拉组合框”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
当前名称：怎么使用jQuery实现可输入多选下拉组合框
文章URL：https://www.cdcxhl.com/article10/ijcdgo.html
成都网站建设公司_创新互联，为您提供定制网站、App开发、网站内链、虚拟主机、面包屑导航、网站导航
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
