Jquery html () метод не работает

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

Две вещи:

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);
}

Answer 3

В функции getCities добавьте var options=''; в качестве первой строки.Вы постоянно добавляете это, но никогда не очищаете это, следовательно проблема.

Answer 4

Проблема в том, что при получении данных вы добавляете их в глобальную переменную options.Итак, просто добавьте это перед $(responce.cities).each(function(){:

options = '';

И все должно быть хорошо.

Кстати, это ответ , а не ответ ,:)

Answer 5

Сначала необходимо очистить параметры переменной. Вы просто добавляете новые города в переменную параметров.

Самым простым решением было бы переместить переменную 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 6

попробуйте сбросить переменную "options" перед циклом:

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