bootstrap的multiple selects内容预加载

Question

效果图：

目标：
在预加载时，把后台获取的字符串显示在选择框中。
用.html()的方式添加，得到的结果可以显示，但是无法删除。
代码详情：这是未选择时的代码

<div class="chosen-container chosen-container-multi" style="width: 100%;" title="" id="demo_cs_multiselect_chosen">
    <ul class="chosen-choices">
        <li class="search-choice">
            <span>United States</span>
            <a class="search-choice-close" data-option-array-index="0"></a>
        </li>
        <li class="search-field">
            <input type="text" value="Choose a Country..." class="" autocomplete="off" style="width: 25px;" tabindex="4">
        </li>
    </ul>
    <div class="chosen-drop">
        <ul class="chosen-results">
            <li class="result-selected" data-option-array-index="0">United States</li>
            <li class="active-result" data-option-array-index="1">United Kingdom</li>
            <li class="active-result" data-option-array-index="2">Afghanistan</li>
            <li class="active-result" data-option-array-index="3">Aland Islands</li>
            <li class="active-result" data-option-array-index="4">Albania</li>
            <li class="active-result" data-option-array-index="5">...</li>
        </ul>
     </div>
</div>

js部分的代码要贴吗？
谁了解过……是不是在预加载的时候修改chosen的container的class使之和选择之后的结果一致？这样有效吗？
我觉得bootstrap不会这么坑吧……这个问题他们考虑过吗？相应要修改的class太多了，dropdown的，选项的active
等等……

Answer 1

无法删除有可能是你动态添加的元素的事件没绑定上造成的。试试用事件委托的方式去绑定删除事件.

Answer 2

其实这个是chosen插件的问题，在给option元素动态添加active后，别忘记$("#id").trigger("chosen:updated");