0

如何通过Cookie保存用户在城市选择（city_id）中的选择？城市在更新页面后自动创建。HTML

 <select name="country_id" id="country_id" class="select_class">
    <option value="USA">USA</option>
    <option value="Russia">Russia</option>
 </select>
 <select name="city_id" id="city_id">

JS

 var countries = {
    USA: ['NewYork', 'Chicago', 'Las Vegas'],
    Russia: ['Moscow','Saint-Petersburg','Vladivostok']
};

var city_update = function() {
    var country_id = $('#country_id option:selected').val();
    var emptycity = $('#city_id').empty();
    for (i in countries[country_id]) {
        var country_name = countries[country_id][i];
        emptycity.append($('<option>').val(country_name).text(country_name));
    }
};
$('#country_id').change(city_update);
city_update();
4

1 回答 1

2

您可以将其存储为 cookie 或使用 localStorage，具体取决于您支持的浏览器。从您的代码看起来，您只是将国家作为选项添加到 city_id 字段？

localStorage 要简单得多（并非所有浏览器都支持），您只需要将事件绑定到 city_id 更改：

$('#city_id').change(function() {

localStorage.setItem('selected-city',$(this).val());

});

此外，您最好不要这样做，for(var i = 0;i < countries[country_id].length;i++) {...而不是for in出于性能原因，因为您正在循环遍历数组，而不是对象（对象需要for in循环）。

或者，您可以使用以下函数使用 Cookie 进行设置，例如：

var cookie = new Cookie();
    $('#city_id').change(function() {

    cookie.set('selected-city',$(this).val(), 86400);
    // access with cookie.get('selected-city');
    });

function Cookie() {
    this.get = function(name) {
        var cookies = document.cookie.split(";");
        for(var i = 0; i < cookies.length; i++) {
                var a = cookies[i].split("=");
                if(a.length == 2) {
                    a[0] = a[0].replace(/^\s+|\s+$/g, '');
                    a[1] = a[1].replace(/^\s+|\s+$/g, '');
                    if(a[0] == name) {
                        return unescape(a[1]);
                    }
                }
        }
        return "";
    };
    this.set = function(name, value, seconds, path, domain, secure) {
        var cookie = (name + "=" + escape(value));
        if(seconds) {
            var date = new Date(new Date().getTime() + (seconds * 1000));
            cookie += ("; expires=" + date.toGMTString());
        }
        cookie += (path ? "; path=" + path : "");
        cookie += (domain ? "; domain=" + domain : "");
        cookie += (secure ? "; secure" : "");
        document.cookie = cookie;
    };
    this.del = function(name, path, domain, secure) {
        var cookie;
        switch(typeof name) {
            case 'object':
                for(var i = 0; i < name.length; i++) {
                    cookie = name[i] + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
                    cookie += (path ? "; path=" + path : "");
                    cookie += (domain ? "; domain=" + domain : "");
                    cookie += (secure ? "; secure" : "");
                    document.cookie = cookie;
                }

                break;
            default:
                cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT";
                cookie += (path ? "; path=" + path : "");
                cookie += (domain ? "; domain=" + domain : "");
                cookie += (secure ? "; secure" : "");
                document.cookie = cookie;
                break;

        }


    };
}

最后，更新一下：

var city_update = function() {
    var country_id = $('#country_id option:selected').val();
    var emptycity = $('#city_id').empty();
    for (i in countries[country_id]) {
        var country_name = countries[country_id][i];
        var selected = country_name == cookie.get('selected-city') ? true : false;
        emptycity.append($('<option>').attr('selected',selected).val(country_name).text(country_name);
    }
};
于 2013-11-05T11:16:20.860 回答