duanqiao1947
2012-06-28 17:07
浏览 70

jQuery Cookie插件保存选择值?

I have a series of two chained selects using ajax that work great. I need to be able to store/save the first select in a cookie for future visits but can't quite figure out how/what to do within the existing code?

$(function(){

    var questions = $('#questions');

    function refreshSelects(){
        var selects = questions.find('select');

        //  Lets not do chosen on the first select
        selects.not(":first").chosen({ disable_search_threshold: true });

        // Listen for changes
        selects.unbind('change').bind('change',function(){

            // The selected option
            var selected = $(this).find('option').eq(this.selectedIndex);
            // Look up the data-connection attribute
            var connection = selected.data('connection');


            // Removing the li containers that follow (if any)
            selected.closest('#questions li').nextAll().remove();

            if(connection){
                fetchSelect(connection);
            }

        });
    }

    var working = false;

    function fetchSelect(val){

        if(working){
            return false;
        }
        working = true;

        $.getJSON('citibank.php',{key:val},function(r){

            var connection, options = '';

            switch (r.type) {
                case 'select':
                    $.each(r.items,function(k,v){
                        connection = '';
                        if(v){
                            connection = 'data-connection="'+v+'"';
                        }

                        options+= '<option value="'+k+'" '+connection+'>'+k+'</option>';
                    });

                    if(r.defaultText){

                        // The chose plugin requires that we add an empty option
                        // element if we want to display a "Please choose" text

                        options = '<option></option>'+options;
                    }

                    // Building the markup for the select section

                    $('<li>\
                        <p>'+r.title+'</p>\
                        <select data-placeholder="'+r.defaultText+'">\
                            '+ options +'\
                        </select>\
                        <span class="divider"></span>\
                    </li>').appendTo(questions);

                    refreshSelects();
                    break;
                case 'html':
                    $(r.html).appendTo(questions);
                    break;
            }

            working = false;
        });

    }

    $('#preloader').ajaxStart(function(){
        $(this).show();
    }).ajaxStop(function(){
        $(this).hide();
    });

    // Initially load the product select
    fetchSelect('callTypeSelect');
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douzhongpi9734 2012-06-28 17:38
    已采纳

    Do you need that value on the server? If you don't I recomment the jStorage plugin. It uses local storage and userData to save information. This has the benefits that the values are not sent to your server on every request, like cookies do. The usage is very simple:

    $.jStorage.set("something", {data: [1,2,3], other: "a string"});
    

    and

    $.jStorage.get("something"); // returns {data: [1,2,3], other: "a string"}
    

    In your code it would be something like:

    $(function() {
      var questions = $('#questions');
      var lastSelection = $.jStorage.get("lastSelection");
      if(lastSelection) {
         questions.find("select:first").val(lastSelection);
      }
    
      // more code....
    
      selects.unbind('change').bind('change',function(){
        var selected = $(this).find('option').eq(this.selectedIndex);
        if(questions.find("select:first")[0] === this) { // Only save if it's the first combo (you could change this to a better way to identify the first select)
          $.jStorage.set("lastSelection", selected);
        }
    
        // more code....
    });
    
    点赞 打赏 评论
  • dpmir1988 2012-06-28 17:32

    Here is great article on using jCookies.

    http://tympanus.net/codrops/2011/09/04/j-is-for-jcookies-http-cookie-handling-for-jquery/

    The code for setting it goes like this:

    $.jCookies({
        name : 'Person',
        value : { first: 'John', last: 'Smith', Age: 25 }
    });
    

    Getting the cookie goes like this

    var person = $.jCookies({ get : 'Person' });
    
    点赞 打赏 评论

相关推荐 更多相似问题