Как заставить этот выпадающий селектор ajax работать во всех браузерах?

Question

Я написал этот код, который заполняет поле <select> результатами ajax-вызова ...

(function() {
    var cache = {};
    var queue = {};

    $('select.country').live('change', function() {
        var $countrySel = $(this);
        var $provSel = $countrySel.closest('tr,.label-and-input').next().find('select.province');
        var $provInput = $provSel.siblings('input.province');
        var country = $countrySel.val();
        var province = $provInput.val();

        $provSel.empty();
        if(country == '' || country == null) {
            $provSel.trigger('change');
            return;
        }

        if(country in cache) {
            addOptions($provSel, cache[country]);
        } else if(country in queue) {
            $provSel.addClass('loading');
            queue[country].push($provSel);      
        } else {
            $provSel.addClass('loading');
            queue[country] = [$provSel]
            $.getJSON('/get-provinces.json', {country:country}, function(provinces) {
                cache[country] = provinces;
                while(queue[country].length > 0) {
                    var $select = queue[country].pop();
                    $select.removeClass('loading');
                    addOptions($select, cache[country]);    
                }                               
            });
        }
    }).trigger('change');
})();

function addOptions($select, options) {
    $select.append('<option value="">- Select -</option>');
    for(var i in options) {
        $select.append('<option value="{0}">{1}</option>'.format(options[i][0], options[i][1]));
    }
    $select.val($select.siblings('input:first').val()).trigger('change');
}

Отлично работает на всех браузерах, на которых я тестировал, но, конечно, не намашина моего клиента.

По сути, я empty() список <option>, а затем append новый <options> один за другим.В некоторых браузерах при переключении назад и вперед между странами список штатов / провинций не обновляется должным образом ... он сохраняет старые значения и просто добавляет новые значения, либо не добавляет новые значения вообще.

Какой самый переносимый подход для этого?Должен ли я вместо этого собрать все параметры в виде большой строки html, а затем установить все сразу с помощью .html()?Должен ли я полностью удалить <select>, чтобы убедиться, что он очищен правильно?

---

HTML:

<tr class="address province">
    <th class="label-cell">
        <label for="id_pickup_address-province">
            Province/State
        </label>
    </th>
    <td class="field-cell">
        <input style="display: none;" id="id_pickup_address-province" class="address province" value="BC" name="pickup_address-province" type="text"><select class="province address"><option value="">- Select -</option><option value="AB">Alberta</option><option value="BC">British Columbia</option><option value="MB">Manitoba</option><option value="NB">New Brunswick</option><option value="NF">Newfoundland and Labrador</option><option value="NT">Northwest Territories</option><option value="NS">Nova Scotia</option><option value="NU">Nunavut</option><option value="ON">Ontario</option><option value="PE">Prince Edward Island</option><option value="QC">Quebec</option><option value="SK">Saskatchewan</option><option value="YT">Yukon</option></select>
    </td>
</tr>

Выбор провинции фактически добавляется динамически, и обновляется скрытое полекогда это изменилось.Пришлось сделать это, чтобы заставить его правильно взаимодействовать с Django и красиво ухудшаться.

Answer 1

Не уверен, поможет ли это здесь.У меня возникли некоторые проблемы с заполнением <select> s после запроса AJAX (я думаю, что это был IE, у которого были проблемы).

Я мог бы решить эти проблемы, добавив задержку в 1 миллисекунду перед добавлением <option> s.на <select>:

$.getJSON('/get-provinces.json', {country:country}, function(provinces) {
    setTimeout(function() {
        cache[country] = provinces;
        while(queue[country].length > 0) {
            var $select = queue[country].pop();
            $select.removeClass('loading');
            addOptions($select, cache[country]);    
        }
    }, 1); // 1 millisecond delay
});

Можете ли вы попробовать ...