模态上的 Select2 问题 - JQuery - JS - FullCalendar

Question

我有一个问题，如果我附加来自 JQuery 的数据，它没有格式，但是如果我直接从 PHP 附加数据，它会正确获取格式 在同一个模态框里。.

到目前为止 2 天试图通过在询问之前到处阅读来获得答案，但我现在不确定，相同的代码，相同的模式，如果 JQuery 发送不起作用，直接在 PHP 确实如此。我不确定是否是 Select2 的初始化，我读了很多关于它可能是的信息，但无法弄清楚它是如何实现的，我尝试了不同的方法，仍然无法通过 JQuery 使其工作。感谢您的帮助！

下面是有问题的代码：

.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>State</label><select class='select2 m-b-10 select2-multiple' style='width: 100%' multiple='multiple' data-placeholder='Choose'><option value='AK'>Alaska</option><option value='HI'>Hawaii</option><option value='CA'>California</option></select></select></div></div>")

我需要通过 JQuery 使其工作，因为将从 AJAX - MySQL.

中提取数据

谢谢！

CalendarApp.prototype.onSelect = function (start, end, allDay) {
    var $this = this;
        $this.$modal.modal({
            backdrop: 'static'
        });
        var form = $("<form></form>");
        form.append("<div class='row'></div>");
        form.find(".row")
            .append("<div class='col-md-6'><div><label>Student</label><input list='thestud' class='form-control' type='text' placeholder='Type Student' name='thestud'></div></div>")

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Color</label><select class='form-control' name='colors'></select></div></div>") 

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Notes</label><input class='form-control' placeholder='Type Notes' type='text' name='notes' required/></div></div>") 

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>State</label><select class='select2 m-b-10 select2-multiple' style='width: 100%' multiple='multiple' data-placeholder='Choose'><option value='AK'>Alaska</option><option value='HI'>Hawaii</option><option value='CA'>California</option></select></select></div></div>") 

            .find("select[name='colors']")
            .append("<option value='bg-success'>Green</option>")
            .append("<option value='bg-danger'>Red</option>")
            .append("<option value='bg-purple'>Purple</option>")
            .append("<option value='bg-primary'>Pink</option>")
            .append("<option value='bg-pink'>Turquoise</option>")
            .append("<option value='bg-info'>Blue</option>")
            .append("<option value='bg-warning'>Orange</option></div></div>")
        $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
            form.submit();
        });

下面来自 php

<div class="modal none-border" id="my-event">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><strong>Add Event</strong></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">

                        </div>
                                    <label class='control-label'>State</label>
                                    <select class="select2 m-b-10 select2-multiple" style="width: 100%" multiple="multiple" data-placeholder="Choose">
                                    <option value="AK">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="CA">California</option>
                                </select>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
                            <button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
                        </div>
                        
                    </div>
                </div>
            </div>

问题图片下方

Answer 1

我预计这是因为将 <select 转换为 select2 对象的 jQuery 代码在您附加包含 [=10] 的 HTML 之前已经执行=] 进入您的页面。因此它没有找到任何元素来附加 select2 功能。

我对 select2 并不特别熟悉，但这遵循了您如何使用 DOM 的一般模式 - 如果您尝试使用 JavaScript 对元素执行某些操作，那么从逻辑上讲，该元素必须存在才能执行此操作。

因此，请确保运行 select2 初始化代码在将目标 <select 元素添加到 DOM.

（当你使用 PHP 时它起作用的原因当然是因为 PHP 在服务器上生成 HTML 并将其提供给浏览器，所以<select 将在 select2 初始化代码有机会运行之前存在。）

模态上的 Select2 问题 - JQuery - JS - FullCalendar

Select2 Issue on Modal - JQuery - JS - FullCalendar

html

javascript

css

jquery

jquery-select2