如何在动态创建的选择列表上执行 select2() 函数？答案

【问题标题】：How to execute select2() function on dynamically created select list?如何在动态创建的选择列表上执行 select2() 函数？
【发布时间】：2016-01-17 19:56:34
【问题描述】：

我只是在单击按钮时动态创建选择列表并将其附加到 div。它工作没有问题，但是当我希望这个选择列表表现得像 select2 预期的那样可搜索时，它不起作用。

在下面，我将我的选择列表传递到一个带有名为 GGroupDropDownListForJavascript 的 html 助手的方法中，html 结果如下所示。

 <select class="form-control input-xxlarge select2me" id="TagCategoryId" name="TagCategoryId">
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element1</option>
 <option value="cf1d7da6-f49f-47aa-ba6d-a58f017c59ec">Element2</option>
 </select>

这是我的 Js 代码。

    $('#post').click(function (e) {
     var arrowBox = $( "<div>"+'@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())' + "</div>");
     arrowBox.appendTo($("#imageContainer"));
     $('#TagCategoryId').select2();
})

我遇到了这个方法的错误。

未捕获的类型错误：$(...).select2 不是函数

顺便说一句，我针对非动态创建的元素对其进行了测试，并且它可以正常工作。但是当涉及到动态创建的时候，它就会停止工作。我错过了什么吗？谢谢。

【问题讨论】：

标签： jquery-select2 dynamically-generated select2

【解决方案1】：

我找不到解决问题的真正方法。最后，我将我的 GGroupDropDownListForJavascript 插入到 Html 中，如下所示。并从我的另一个 div 调用它。这不是一个很好的解决方案，但为我解决了问题。

        <div id="copyDiv">
            @Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "")
        </div>

和JS是一样的；

        var categoryBox = $('#copyDiv');
        categoryBox.appendTo(arrowBox);

更新

实际上，在我添加以上行后它不起作用。它只会将相关的选择列表放入我的 div 中，但我的选择列表不再起作用。所以我解决了我的问题，如下所示；

执行下面的方法；你必须在这里小心两件事。第一个是确保在您的 select2() 选择器中添加前缀“select”，否则您将收到“未为 Select2 定义的未捕获查询函数”错误。这将解决这种情况，第二个是确保您的 select2.js 是最新的。

   $('body').on('DOMNodeInserted', 'select', function () {
        $("select.form-select").select2();
    });
   $("button").on("click", function () {
         $(".dcontainer").append($('@Ajax.JavaScriptStringEncode(Html.GGroupDropDownListForJavascript(p => p.TagCategoryId, Model.GroupedTagCategories, "").ToHtmlString())'));
    });

我真的希望这会对某人有所帮助。

【讨论】：