Question

为什么这段代码：

$('#state option[value=5]').attr('selected', 'selected');

仅适用于：

load: function (states) {
            $.each(states, function(key, state) {
                var stateText = state.state + ' (' + state.acronym + ')';
                $('#state').append($('<option />').attr('value', state.id).text(stateText));
                $('#state option[value=5]').attr('selected', 'selected'); // HERE THE CODE WORK
            });

并且不在以下工作：

$(function() {
    loadData(state);
    $('#state option[value=5]').attr('selected', 'selected'); // HERE THE CODE DOESN'T WORK
});

查看完整的JS文件：

var loadData = function(object) {
    $.ajax({
        url: object.url(),
        type: "GET",
        dataType: "json",
        async: "false",
        success: function(data) {
            object.load(data);
        }
    });
};

var state = {
    url: function () {
        return 'resources/js/radio/states/states.json';
    },
    load: function (states) {
        $.each(states, function(key, state) {
            var stateText = state.state + ' (' + state.acronym + ')';
            $('#state').append($('<option />').attr('value', state.id).text(stateText));
            $('#state option[value=5]').attr('selected', 'selected'); // HERE THE CODE WORK
        });
    }
};

$(function() {
    loadData(state);
    $('#state option[value=5]').attr('selected', 'selected'); // HERE THE CODE DOESN'T WORK
});

Answer 1

问题是异步过程，为了解决这个问题，它只删除了双引号：

async: false,

在原始代码中，我在代码中使用了引号：

async: "false",

Answer 2

可能的解释是：ajax调用中的success回调会在<options>上通过<select id="state">函数加载state.load(data)：

    success: function(data) {
        object.load(data);
    }

因为object.load(data);执行加载选项的作业：$('#state').append($('<option />').attr('value', state.id).text(stateText));。如果ajax调用导致错误而不是成功，则永远不会调用此选项，并且选项永远不会加载，因此当您在调用ajax之后调用$('#state option[value=5]').attr('selected', 'selected');代码时，代码不起作用，因为没有选项可以地选择。

将此问题添加到您的ajax调用中添加error回调：

$.ajax({
    url: object.url(),
    type: "GET", 
    dataType: "json",
    async: "false",
    success: function(data) {
        object.load(data);
    },
    error: function(jqXHR, textStatus, error){
        // console.log or alert... to check if there is an error
    }
});

希望这有帮助，

使用Ajax加载数据后，jQuery不会更改所选选项

2 个答案: