我使用Bootstrap Multiselect基于字符串数组创建了multiselect下拉菜单。看起来像这样:
我有一个名为initCommodities
的数组,我在页面加载时使用该数组。我想要在下拉清单中检查数组中的所有值。这是我用来生成下拉菜单的代码:
$('#selectCommodities').html('');
for (var i = 0; i < totalCommodities.length; i++) {
if (totalCommodities[i].split(" ")[0].length == 1) {
$('#selectCommodities').append('<optgroup label="' + totalCommodities[i] + '"></optgroup>');
}
$('#selectCommodities').append('<option value="' + totalCommodities[i] + '-' + '">' + totalCommodities[i] + '</option>');
}
$('#selectCommodities').multiselect({
maxHeight: 300,
includeSelectAllOption: true,
enableFiltering: true,
enableClickableOptGroups: false,
dropUp: true,
numberDisplayed: 0,
onChange: function(element, checked) {
if (checked === true) {
selectedCommodities.push(element.val())
} else if (checked === false) {
selectedCommodities.splice($.inArray(element.val(), selectedCommodities), 1);
}
selectedCommodities.sort();
console.log(selectedCommodities);
}
});
$('#selectCommodities').multiselect("select", initCommodities);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
totalCommodities
是由81个字符串组成的数组,而initCommodities
仅具有10个值,这些值也出现在totalCommodities
中。我一直在寻找解决方案,发现的是代码$('#selectCommodities').multiselect("select", initCommodities);
的最后一行。不幸的是,这似乎无能为力。
编辑:我通过从行+ '-'
中删除了$('#selectCommodities').append('<option value="' + totalCommodities[i] + '-' + '">' + totalCommodities[i] + '</option>');
来修复了它。我不确定为什么要修复它,但是确实可以。