请帮忙。
我创建了两个下拉列表，显示带有图标的选定复选框。 问题是这两个下拉菜单不是独立运行的。
如果我更改下拉列表 2 中的某些内容(该空间有什么安全性)
下拉列表 1 中的所有内容也会被添加。 
我需要下拉功能来处理多个下拉菜单。
注意:我需要将图标添加到选定的复选框中。 IE 在显示所选复选框的下拉切换 div 中:)
此外，所选的复选框不会立即显示。我需要再次单击它才能显示所选的复选框
https://jsfiddle.net/gilbertlucas46/szyz4031/4/
function getValueUsingClass(){
$(".checkbox-list li label").click(function() {
/* declare an checkbox array */
var features_checkedBox = []
/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$(" .checkbox-list li input:checked + label").each(function() {
allChecked = $(this).html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
})
}
getValueUsingClass();
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('checkbox-list')) {
e.stopPropagation();
}
});.dropdown-select .dropdown-toggle {
background: #71c621;
background: linear-gradient(135deg, #71c621 0%, #5bab41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71c621', endColorstr='#5bab41',GradientType=1 );
width: 100%;
height: 42px;
line-height: 42px;
padding: 0;
font-size: 14px !important;
font-weight: normal;
border: 2px solid #71c621;
position: relative;
overflow: hidden;
}
.dropdown-select .dropdown-menu {
display: none;
}
.dropdown-select {
position: relative;
}
.dropdown-select.open .dropdown-menu {
display: block !important;
width: 100%;
top: 50px;
}
label {
cursor: pointer;
display: block;
border-bottom: 1px solid gray;
width: 100%;
}
input {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
<div class="col col-md-6">
<fieldset data-form-field="required-group" class="suitability">
<legend>What is the space suitable for </legend>
<div class="button-group dropdown dropdown-select checkDropdowns">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Suitable for? <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li>
<input type="checkbox" id="transactable-storage-purpose-clothes" value="Clothes" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-clothes">
<i class="glyphicon glyphicon-volume-off"></i> Clothes
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-caravan" value="Caravan" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-caravan">
<i class="glyphicon glyphicon-flag"></i> Caravan
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-boat" value="Boat" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-boat">
<i class="glyphicon glyphicon-headphones"></i> Boat
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-car" value="Car" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-car">
<i class="glyphicon glyphicon-backward"></i>Car
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-furniture" value="Furniture" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-furniture">
<i class="glyphicon glyphicon-resize-small"></i> Furniture
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-docs" value="Office Docs" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-docs">
<i class="glyphicon glyphicon-plane"></i> Office Docs
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-trailer" value="Trailer" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-trailer">
<i class="glyphicon glyphicon-magnet"></i> Trailer
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-workshop" value="Workshop" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-workshop">
<i class="icon icon-workshop"></i> Workshop
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-container" value="Container" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-container">
<i class="glyphicon glyphicon-leaf
glyphicon "></i> Container
</label>
</li>
</ul>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<fieldset class="security">
<legend>What security does the space have <a href="#" data-toggle="popover" data-content="Let prospective renters know what security features your space has. You can select multiple options.">
<i class="fa fa-question-circle"></i></a></legend>
<div class="button-group dropdown dropdown-select checkDropdowns detailsDrop">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Security Features <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li data-value="<i class='icon icon-alarm'">
<input type="checkbox" id="transactable-security-alarm" value="4750" data-security="">
<label for="transactable-security-alarm">
<i class="icon icon-alarm"></i> <span class="title">Alarm</span>
</label>
</li>
<li data-value="<i class='icon icon-cctv'">
<input type="checkbox" id="transactable-security-cctv" value="4751" data-security="">
<label for="transactable-security-cctv">
<i class="icon icon-cctv"></i> <span class="title">CCTV</span>
</label>
</li>
<li data-value="<i class='icon icon-deadlock'">
<input type="checkbox" id="transactable-security-deadlock" value="4752" data-security="">
<label for="transactable-security-deadlock">
<i class="icon icon-deadlock"></i> <span class="title">Deadlock</span>
</label>
</li>
<li data-value="<i class='icon icon-security-bars'">
<input type="checkbox" id="transactable-security-security-bars" value="5960" data-security="">
<label for="transactable-security-security-bars">
<i class="icon icon-security-bars"></i> <span class="title">Security Bars</span>
</label>
</li>
<li data-value="<i class='icon icon-lock'">
<input type="checkbox" id="transactable-security-combination-lock" value="4753" data-security="">
<label for="transactable-security-combination-lock">
<i class="icon icon-lock"></i> <span class="title">Combination Lock</span>
</label>
</li>
<li data-value="<i class='icon icon-roller-door'">
<input type="checkbox" id="transactable-security-security-roller-door" value="4754" data-security="">
<label for="transactable-security-security-roller-door">
<i class="icon icon-roller-door"></i> <span class="title">Security Roller-door</span>
</label>
</li>
</ul><!-- checkbox-list dropdown-menu -->
</div>
</fieldset>
</div>
</div>最佳答案
您的代码的问题是 $(".checkbox-list li input:checked + label") 不依赖于调用处理程序的下拉列表。
此外，由于标签的单击事件和输入的更改事件之间的差异，无法识别第一个值。
我稍微改变了你的代码:
$('.checkbox-list input').on('change', function() {
var $this = $(this).parents('.checkbox-list');
var features_checkedBox = [];
$this.find('input:checked').each(function() {
allChecked = $(this).next('label').html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
});
<强> Example
您可能想要优化该示例以满足您的需求。
关于javascript - 如何将所有选定的复选框附加到跨度中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47219025/