通过onclick事件加载后，select2标记框不起作用

debugcn 发表于 Dev

卡姆鲁尔汗

在我的页面中，有一个select使用select2库的框。我要做的就是在单击按钮后添加更多选择框。为此，我尝试了以下代码：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/application.css"/>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.1/select2.min.js"></script>
    </head>
    <body>  
        <div id="location_form">
            <div class="form-group" style="margin-bottom: 50px;">
                <label for="cat" class="col-sm-1 col-sm-offset-1">Category <span class="asterisk">*</span></label>
                <div class="col-sm-10">
                    <select class="form-control input-transparent select2" id="cat" name="category" required="required" multiple="multiple" size="1" data-parsley-trigger="change">
                        <option style="margin-bottom: 1px;">Select Categories</option>
                        <option value="1">Opt 1</option>
                        <option value="2">Opt 2</option>
                        <option value="3">Opt 3</option>
                        <option value="4">Opt 4</option>
                    </select>
                </div>
            </div>          
        </div>
        <input type="button" id="addmore" value="Add More" />
        <div class="locations"></div>

        <script src="js/action-scripts.js"></script>
        <script>
            //----- tag loader --//
            $(".select2").each(function(){
                $(this).children().first().remove();
                $(this).select2({
                    placeholder: "Select Categories",
                    maximumSelectionSize: 4
                });
            });
        </script>
    </body>
</html>

我的action-script.js如下所示：

// Add location 2
$('#addmore').click(function() {

    index = Math.random();
    var location_div = '<div class="location" id="location_' + index + '">';
    location_div += $('#location_form').html();
    location_div += '<hr class="col-sm-offset-1"></div>';
    $('.locations').append(location_div);
});

因此，基本上，Im试图做的是，一旦#addmore单击HTML页面中具有ID的按钮，我便会将<div id="location_form">div中的所有内容附加到<div class="locations">。

这行得通，但是问题是我select2在新的选择框中松散了库的所有功能。这是我的jsfiddle链接：

https://jsfiddle.net/0cars6oy/4/

如果您选中上面的jsfiddle链接，您将看到单击Add More按钮后不显示的选择框。不管您在此处键入什么内容，都不会提示列表中的任何内容。

我对javascript的了解非常有限。我很难弄清楚如何解决此问题。任何帮助深表感谢。

干杯

穆斯塔法

您主要需要做两件事：

1）从您的当前选择中删除ID，因为您是直接复制html。2）在添加html之后，在按钮click事件处理程序中调用此函数

$(".select2").each(function(){
                $(this).children().first().remove();
                $(this).select2({
                    placeholder: "Select Categories",
                    maximumSelectionSize: 4
                });
            });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。