javascript - 如何让这个 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> 时遇到了一些问题在 AJAX 请求之后(我认为是 IE 有问题)。

我可以通过在添加 <option> 之前添加 1 毫秒的延迟来解决这些问题。 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
});

你可以试一试吗...