当你有 php 函数时，用 ajax post 更新 select2

Question

我有一个名为 demclients 的 div，它会在 ajax 发布后刷新。如果 ajax 帖子运行，它会创建一个新客户端。我想更新选择字段，以便可以选择刚刚创建的新客户端。

    <div class="demclients">
     <div class="form-group">
           <label class="col-md-4 control-label" for="textinput">Klant zoeken</label>
           <div class="col-md-4">
                 <select id="allclients" style="width:300px;" name="client" required>
                     <?php foreach($user->getAllClients() as $klant) { ?>
                         <option value="<?= $klant['id']?>"><?= $klant['naam']?></option>
                     <?php } ?>
                 </select>
            </div>
     </div>
</div>

此代码获取所有客户端并将它们显示在选择字段中，这正是我想要的。但现在我想创建一个新客户端（使用引导模式完成）。

$("form#createclient").submit(function (event) {

    var postForm = $('form#createclient').serialize() +             
        '&name=' + $('input[name=name]').val() +                      
        '&email=' + $('input[name=email]').val() +                    
        '&perms=' + $('input[name=rechten]').val();

    $.ajax({
        type: "POST",
        url: "?page=clientmail",
        data: postForm,
        cache: false,
        success: function (result) {
            alert('Nieuwe klant aangemaakt');
            $('.demclients').load('?page=uploadoverview' +  ' .demclients');
        }
    });
    event.preventDefault();

});

因此，提交函数从输入中获取所有信息并进入页面 clientmail 以使用此信息创建一个新客户端，然后我使用以下信息更新信息：

`$('.demclients').load('?page=uploadoverview' +  ' .demclients');`.

在标题中，选择函数被调用：

$(document).ready(function() {
    $("#allclients").select2();
});

此代码只运行一次。我想更新选择，同时仍然保留 select2() 函数的下拉菜单。我尝试了多种更新方法，例如：

• 在 ajax 后更新的 demclients div 中加入 select 函数 成功
• 使用 select2("destroy") 然后再次调用 select2() 使其更新

但我无法让它更新选择字段，同时保留 select2() 函数的下拉菜单。

Answer 1

使用加载方法的成功回调，因为只有在加载完成并且页面中有新的 html 时才应该调用 select2

success: function (result) {
            alert('Nieuwe klant aangemaakt');
            $('.demclients').load('?page=uploadoverview' +  ' .demclients', function(){
                 //success load event
                 $("#allclients").select2();
            });
        }