选择 ajax 准备就绪

Question

我尝试使用通过 ajax 选择的 jquery 调用：https://harvesthq.github.io/chosen/

我的 html 是：

<div class="form-group m-b logiciel">
    <label>Logiciel concerné</label>
    <select id="logiciel" name="logiciel" class="chosen">
    </select>
</div>

我的第一个脚本是：

$(document).ready(function () {
    $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val());
    $("#logiciel").trigger('chosen:updated');
    $("#logiciel").chosen();
});

我的第二个是（#ticket_type 是另一个选择）：

$(function () {
    $('#client').on('change', function () {
        var id = this.value;
        $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + id);
        $("#logiciel").trigger('chosen:updated');
    });
});

当我在第一个 select 上 select 时一切正常，但在第一次加载时，第二个 select 是空的。 Ajax 没问题，我可以在日志上看到结果。

有人能做到吗？

Answer 1

我猜你想要运行这些：

$("#logiciel").trigger('chosen:updated');
$("#logiciel").chosen();

完成后：

$("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val());

因为 .load() 是异步的，您必须使用 .load() 调用的完成处理程序才能知道它何时完成：

$(document).ready(function () {
    $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + $('#client').val(), function() {
        $("#logiciel").trigger('chosen:updated').chosen();
    });
});

$(document).ready(function () {
    $('#client').on('change', function () {
        var id = this.value;
        $("#logiciel").load('ajax/ticket_add_select.ajax.php?id=' + id, function() {
            $("#logiciel").trigger('chosen:updated');
        });
    });
});

选择 ajax 准备就绪

Chosen ajax on ready

ajax

jquery

jquery-chosen