引导警报，如可忽略的文本

Question

这是我的要求： 我有一个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;
    }
}

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

想法是，当用户单击x时，应删除该条目。有什么更好的方法？