javascript - Ajax 请求在第二次调用后不更新下拉菜单

Question

我最近几天遇到了一个问题，所以我需要你的帮助。

我创建了一个 jQuery 脚本来更新现有的下拉菜单(根据返回的结果设置禁用或启用)。事实是它有效，但只能运行一次。在所有接下来的调用中更新与第一次调用时相同。

$('#date_input').change(function(){
    var date = document.getElementById('date_input').value;

    $.ajax({
        type: "POST",
        url: "check_files.php",
        data: { "date": date },
        cache: false,
        async: false,
        success: function(results) {
            file_list = jQuery.parseJSON(results);
            jQuery.each(file_list, function(i, val) {
                // $("#city_input option[value='" + val + "']").remove();
                $("#city_input option[value='" + val + "']").attr('disabled', 'true');
            });
        }
    });
    $('#date_input').datepicker('hide');
});

Answer 1

添加这一行:

$("#city_input option").removeAttr('disabled');

之前

jQuery.each(file_list, function(i, val) {

重置最后的更改。如果您错过了这一点，则不会再次启用旧的禁用选项

    success: function(results) {
        file_list = jQuery.parseJSON(results);
        $("#city_input option").removeAttr('disabled');
        jQuery.each(file_list, function(i, val) {
            // $("#city_input option[value='" + val + "']").remove();
            $("#city_input option[value='" + val + "']").attr('disabled', 'true');
        });
    }