Jquery html() 方法不起作用答案

【问题标题】：Jquery html() method doesn't workJquery html() 方法不起作用
【发布时间】：2012-02-23 17:44:02
【问题描述】：

这是我的代码：

$(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('') 所以在插入接收到的值之前它应该是空的。但我无法弄清楚错误是什么。

【问题讨论】：

难道不只需要在$(responce.cities).each 语句之前重新初始化“option”值吗？

标签： javascript jquery html refresh

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

尝试在循环之前重置您的“选项”变量：

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

【讨论】：

【解决方案3】：

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

最简单的解决方案是将 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'
    );
}

【讨论】：

【解决方案4】：

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

options = '';

一切都会好起来的。

顺便说一句，这是响应，而不是响应。 :)

【讨论】：

【解决方案5】：

在函数 getCities 中，添加 var options=''; 作为第一行。您不断地添加它，但从不清除它，这就是问题所在。

【讨论】：

【解决方案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);
}

【讨论】：

不，它应该是 .prop()，而不是 .attr()... 从 jQuery 1.6 开始。
哎呀，你是对的。该死的我的隧道视野，只看到“真实”。编辑以符合 Sparky 惊人的 jQuery 标准。 :D