如何在动态创建的选择列表上执行select2（）函数？ [英] How to execute select2() function on dynamically created select list?

问题描述

我只是在单击按钮时动态创建选择列表，然后将其附加到div。它可以正常工作，但是当我希望这个选择列表像select2一样可搜索时，它就无法正常工作。

I am simply creating a select list dynamically on a button click and appending it to a div. It is working without a problem but when I want this select list to behave like searchable as expected for select2 it is not working.

在下面，我传递了我的select

In below, I'm passing my select list into a method with an html helper named GGroupDropDownListForJavascript and the html result is like below.

 <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不是函数

Uncaught TypeError: $(...).select2 is not a function

我对它不是动态创建的元素进行了测试，并且它可以正常工作。但是，当涉及到动态缩放时，它将停止工作。
我错过了什么吗？
谢谢。

I tested it for non-dynamically created elements btw and it is working without any problem. But when it comes to dynamically cretaed one it stops working. Am I missing something? Thank you.

推荐答案

我找不到解决问题的真正方法。
最后，我将GGroupDropDownListForJavascript插入Html，如下所示。
然后从我的另一个div调用。

I couldn't find a true way solution to my problem. Finally, i insert my GGroupDropDownListForJavascript to Html like below. And called it from my other div. It is not a great solution but solves the problem for me.

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

而JS就像;

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

更新

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

Actually it doesn't work after i added above lines. It does only put the related select list into my div but my select list doesn't work anymore. So i solved my issue like below;

执行以下方法；您必须在这里注意两件事。
首先，一定要在select2（）选择器中添加前缀 select，否则会出现未为Select2定义的未捕获查询函数错误。这将解决该情况，第二个是确保您的select2.js是最新的。

Execute below method; you have to be careful about 2 things here. First one is be sure to put a prefix "select" to your select2() selector otherwise you will get an "Uncaught query function not defined for Select2" error. This will solve that case and second one is make sure your select2.js is up to date.

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

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

i really hope this will help someone.

这篇关于如何在动态创建的选择列表上执行select2（）函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！