Javascript 类似可撤销文本的引导警报

以下是我的要求： 我有一个html选择列表。当用户从列表中选择一个选项时，其文本必须显示在div中的选项旁边。该文本的功能必须类似于引导解除警报

我的做法如下： html代码：

<div class = "col-md-4">
    <select id = "a1" onchange = addit('a1','r1')>
        <option>Potato</option>
        <option>Tomtato</option>
        <option>Spinach</option>
    </select>
</div>
<div class = "col-md-8" id = "r1"></div>

马铃薯
托姆塔托
菠菜

以下是javascript代码：

function addit(a,b){
    p1 = '<div class="alert alert-warning alert-dismissible fade show" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
    p2 = '</div>';
    var t = document.getElementById(a);
    var an = t.options[t.selectedIndex].text;
    var vl = document.getElementById(b).innerHTML;
    if (vl.indexOf(an) == -1){
        document.getElementById(b).innerHTML += p1+an+p2;
    }
}

功能附加项（a、b）{
p1=“×；”；
p2=''；
var t=document.getElementById（a）；
var an=t.options[t.selectedIndex].text；
var vl=document.getElementById（b）.innerHTML；
if（vl.indexOf（an）=-1）{
document.getElementById（b）.innerHTML+=p1+an+p2；
}
}

这不管用。div元素中没有显示任何内容。当我右键单击并检查（在Chrome中）时，我可以看到添加的这些文本

---

这个想法是当用户点击x时，条目应该被删除。更好的方法是什么

对我来说很有用，即使在

onclick

值周围没有引号：是的，Chris，我可以看到它在JSFIDLE中工作。奇怪的是，它在引导模式中对我不起作用。除非你向我们展示你的全部HTML内容，否则我们不可能给你更新。可能是样式表或JS没有正确链接。