Question

这是我的代码：

$(function () {

    var region = $('#region');

    var city = $('#city');

    var pickedRegionId = region.find(':selected').val();

    var options;

    if (pickedRegionId === '') {
        console.log('region is empty, html() and disable');
        city.html('');
        city.attr('disabled', true);
    }

    region.change(function(){
        console.log('region is changed');
        pickedRegionId = $(this).val();
        if (pickedRegionId !== '') {
            city.html('');
            console.log('loading cities');
            getCities(pickedRegionId);
        }
    });

    function getCities (regionId) {
        city.attr('disabled', true);
        city.html('<option>Loading...</option>');

        $.get(
            '/ajax/get_cities',
            'region_id='+regionId,
            function (responce) {
                if (responce.result === 'success') {
                    $(responce.cities).each(function(){
                        options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
                    });
                    city.html(options);
                    city.attr('disabled', false);
                }
            }, 'json'
        );
    }
});

当页面加载完全没问题时，我选择一些区域并选择城市填充ajax数据。但是当我选择另一个区域时，城市中的数据选择只会扩展为更新的数据。

所以问题是我有两个地区的城市（新旧城市）。无论我选择另一个区域多少次，它只是为城市选择添加新数据。在代码中所有看起来都很好，在区域更改时我放了.html（''）所以在插入接收的值之前它应该是空的。但我无法弄清楚这是什么错误。

Answer 1

$(responce.cities).each(function(){
    options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
});

您只是附加选项而根本不清除它们。我会在您将cities设置为加载的位置下方清空您的选项。

Answer 2

尝试在循环之前重置“options”var：

...
options = '';
$(responce.cities).each(function(){
...

Answer 3

您必须先清空变量选项。您只是在选项变量中添加新城市。

最简单的解决方案是将options变量移动到getCities函数中，如下所示：

function getCities (regionId) {
    var options = "";

    city.attr('disabled', true);
    city.html('<option>Loading...</option>');

    $.get(
        '/ajax/get_cities',
        'region_id='+regionId,
        function (responce) {
            if (responce.result === 'success') {
                $(responce.cities).each(function(){
                    options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
                });
                city.html(options);
                city.attr('disabled', false);
            }
        }, 'json'
    );
}

Answer 4

问题在于，当您收到数据时，会将其添加到全局的options变量中。所以，只需在$(responce.cities).each(function(){之前添加：

options = '';

一切都应该没问题。

BTW，它是响应，而不是响应。：）

Answer 5

在函数getCities中，添加var options='';作为第一行。你不断添加它，但从不清除它，因此问题。

Answer 6

两件事：

1）city.attr('disabled', true);应为city.prop('disabled', 'disabled');

2）尝试将options重置为空字符串，然后重新填充它：

if (responce.result === 'success') {
    options = '';                        
    $(responce.cities).each(function(){
        options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
    });

    city.html(options);
    city.attr('disabled', false);
}

Jquery html（）方法不起作用

6 个答案: