0

都市の選択 (city_id) でユーザーの選択を Cookie で保存する方法は? 都市はページの更新後に自動作成されます。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 infor 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 に答える