Question

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');
});

Answer 1

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....
});