动态添加复选框到多选下拉列表

Question

我已经被这个问题困扰了好几个小时，我快疯了！我需要一个复选框的下拉列表 - 我将其动态填充到选择标签中。我还需要将使用 jquery 深度克隆的每个多选下拉列表附加到许多 <div> 元素。但是，每次我这样做时，克隆的元素都会呈现为可多选项目的列表（而不是下拉列表并丢失其所有样式）。这是我想将复选框添加到的多选容器：

<select class="multiselect1" multiple="multiple">


</select>

我最终通过调用 .multiselect(); 来初始化每个克隆的下拉菜单。我为此使用的库是：http://davidstutz.github.io/bootstrap-multiselect/

        $('.multiselect1').multiselect();
        var filterClone = $('.multiselect1').clone(true);
        //filterClone.multiselect();
        $('body').append(filterClone[0]);

执行上述行时，选择元素确实存在于正文中，但不可见。当我删除样式属性时，元素变得可见，但呈现为多选项目列表（这是预期的）。但是为什么克隆的多选下拉菜单根本不显示呢？

任何可以引导我使用 javascript 或 jquery 的解决方案（或解决方案本身！）的建议将不胜感激。

Answer 1

要完成这项工作，您需要 JQuery。你包括JQuery吗？如果你没有，你可以使用这个：<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>你把所有文件上传到你的服务器了吗？

在您的网站上试用此代码。有用吗？

HTML：

<select id="SOExample" multiple="multiple">
    <option value="Love it!">Love it!</option>
    <option value="Hate it!">Hate it!</option>
    <option value="I don't know...">I don't know...</option>
</select>

JS：

<script type="text/javascript">
    $(document).ready(function() {
        $('#SOExample').multiselect();
    });
</script>