我正在使用Bootstrap4,我有一个多选和一个单独的div,显示当前选择的徽章系列。(因为如果使用移动设备,选择不会显示当前选择的内容,它只会显示选择了多少项)
<div class="form-control mb-2" id="fieldsCompleteness" name="fieldsCompleteness">
<span class="badge badge-secondary">
Acoustic
</span>
<span class="badge badge-secondary">
Album
</span>
<span class="badge badge-secondary">
Sort Album Artist
</span>
</div>当用户更改选择时,必须更新徽章,这是通过调用此Javascript函数来完成的。
function getSelectValues(select, readonlylist)
{
var result = '';
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++)
{
opt = options[i];
if (opt.selected)
{
result+='<span class="badge badge-secondary">' + opt.text + '</span>';
}
}
readonlylist.innerHTML =result;
return result;
}这是可行的,除了每个徽章之间的空白处消失。我不明白为什么,看起来我只是用完全相同的Html (一系列跨度)替换现有的Html。由于我误解了innerHTML的工作原理,它对外部div上定义的类有影响吗?
https://stackoverflow.com/questions/50650789
复制相似问题