怎么使用jQuery實現(xiàn)可輸入多選下拉組合框
這篇文章主要介紹“怎么使用jQuery實現(xiàn)可輸入多選下拉組合框”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“怎么使用jQuery實現(xiàn)可輸入多選下拉組合框”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為連山等服務(wù)建站，連山等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為連山企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
代碼如下：
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')
});由于本組件中使用了數(shù)組的map方法，可能此方法在ie中不能兼容。由于我電腦ie無法打開，用360瀏覽器測試后同樣可是正常使用。
關(guān)于“怎么使用jQuery實現(xiàn)可輸入多選下拉組合框”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
當(dāng)前名稱：怎么使用jQuery實現(xiàn)可輸入多選下拉組合框
文章URL：http://muchs.cn/article10/ijcdgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App開發(fā)、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、面包屑導(dǎo)航、網(wǎng)站導(dǎo)航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
