当你有 php 功能时，用 ajax post 更新 select2

Question

我有一个名为 demclients 的 div，它会在 ajax post 之后刷新。如果 ajax post 运行，它会创建一个新的客户端。我想更新 select 字段，这样我就可以 select 我刚创建的新客户端。

    <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>

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

$("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');`.

在 header 中调用 select 函数是这样的：

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

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

将 select 函数放入 ajax 之后更新的 demclients div 成功
使用 select2("destroy") 然后再次调用 select2() 使其更新

但我无法在保持 select2() 函数的下拉菜单的同时更新 select 字段。

Answer 1

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

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

当你有 php 功能时，用 ajax post 更新 select2

Update select2 with ajax post when you have php function

php

ajax

jquery

bootstrap-modal

select2