Question

我目前正在使用jquery-1.11.1.min.js。我有三个不同的下拉菜单，省，州，城市，我有以下javascript来处理用户选择省，州或城市时的更改。

$provinceSelector = $('.selector-province');
$stateSelector = $('.selector-state');
$citySelector = $('.selector-city');

$provinceSelector.on('change', function () {
        var provinceid = $(this).val();
        $stateSelector.html('<option value>Loading...</option>');
        $stateSelector.attr('disabled','true');
        $.ajax({
            url: '/location/states/' + provinceid,
            timeout: 20000,
            type: 'GET',
            data: [],
            success: function (response) {
                if (!response.status || response.states.length == 0)
                {
                    $provinceSelector.val('');
                    $stateSelector.html('<option value>Pilih kabupaten lokasi toko kamu</option>');
                }
                else if (response.status && response.states.length > 0 && $stateSelector)
                {
                    $stateSelector.removeAttr('disabled');
                    $stateSelector.html('<option value>Pilih kabupaten</option>');
                    for (var i = 0; i < response.states.length; i++)
                    {
                        $stateSelector.append('<option value="' + response.states[i].id + '">' + response.states[i].name + '</option>');
                    }
                }
            },
            error: function (x, t, m) {
                $provinceSelector.val('');
                $stateSelector.html('<option value>Pilih kabupaten lokasi toko kamu</option>');
            },
        });
    });

服务器返回的结束点如下所示：

{"status":true,"cities":[{"id":67,"name":"Alas"},{"id":68,"name":"Alas Barat"},{"id":472,"name":"Batu Lanteh"},{"id":1233,"name":"Empang"},{"id":2276,"name":"Labangka"},{"id":2283,"name":"Labuhan Badas"},{"id":2338,"name":"Lape-Lopok"},{"id":2547,"name":"Lunyuk"},{"id":2919,"name":"Moyohilir"},{"id":2920,"name":"Moyohulu"},{"id":3605,"name":"Plampang"},{"id":3936,"name":"Ropang"},{"id":4603,"name":"Sumbawa"},{"id":4604,"name":"Sumbawa Besar"},{"id":5265,"name":"Utan-Rhee"}]}

如果发生错误，它也可以返回false状态。现在的问题是，有几次我从用户那里得到他们在选择一个省后看到undefined状态的报告（换句话说，状态中没有选项，只是未定义），这通常是在移动设备。我想知道这有甚么可能吗？我想我正在处理每一个可能的情况。任何想法/提示？

Answer 1

如前所述 - 检查/验证undefined（if / try catch ...）并在服务器上进行一些登录以查看发生的情况：）

另一个提示 - 移动设备可能有不良覆盖/超时/等等 - 这就是你可能设置20秒超时的原因。这将是我调试的下一步。

Answer 2

在您的情况下，可能会因为任何问题而发生：

来自服务器的长ping。（为什么你使用20秒超时）。
移动设备上js库中的问题。

修复此问题可能与设置验证if (response.states[i] != undefined )或使用try catch构造类似。下面我提供了一些代码，这些代码将在没有undefined错误的情况下执行。

$provinceSelector = $('.selector-province');
$stateSelector = $('.selector-state');
$citySelector = $('.selector-city');

$provinceSelector.on('change', function () {
        var provinceid = $(this).val();
        $stateSelector.html('<option value>Loading...</option>');
        $stateSelector.attr('disabled','true');
        $.ajax({
            url: '/location/states/' + provinceid,
            timeout: 20000,
            type: 'GET',
            data: [],
            success: function (response) {
                if (!response.status || response.states.length == 0)
                {
                    $provinceSelector.val('');
                    $stateSelector.html('<option value>Pilih kabupaten lokasi toko kamu</option>');
                }
                else if (response.status && response.states.length > 0 && $stateSelector)
                {
                    $stateSelector.removeAttr('disabled');
                    $stateSelector.html('<option value>Pilih kabupaten</option>');
                    for (var i = 0; i < response.states.length; i++)
                    {
                        if (response.states[i] != undefined ) {   // here you can add validate expression
                           $stateSelector.append('<option value="' + response.states[i].id + '">' + response.states[i].name + '</option>');
                        }                            
                    }
                }
            },
            error: function (x, t, m) {
                $provinceSelector.val('');
                $stateSelector.html('<option value>Pilih kabupaten lokasi toko kamu</option>');
            },
        });
    });

填充AJAX javascript / jQuery下拉列表（省，州，城市）给出未定义的ocassionaly

2 个答案: