Question

我只是在点击按钮时动态创建一个选择列表并将其附加到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();
})

我对此方法的误差低于此值。

未捕获的TypeError：$（...）。select2不是函数

我测试了非动态创建的元素btw，它没有任何问题。但是，当谈到动态创建时，它会停止工作。我错过了什么吗？谢谢。

Answer 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())'));
    });

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

如何在动态创建的选择列表上执行select2（）函数？

1 个答案: