gistfile1.js

jQuery.extend({
  // Example: console.log(jQuery.chainSelect('search_location', locations_object, {levels: ['continent', 'country', 'region', 'city', 'suburb']}));
  chainSelect: function(id, json, options) {
    this._findValue = function(value, result) {
      for (k in this.json) {
        var v = this.json[k];
        
        if (k == value) {
          result.unshift(k);
          result = this._findValue.apply(this, [v[options.fields.parent_id], result]);
          break;
        }
      }

      return result;
    }

    this._createSelect = function(parent_id, current_id, index) {
      if (index < options.levels.length) {
        var select_id = id + '_' + index;
        var select = jQuery('#' + select_id).eq(0);

        if (select.length == 0) {
          select = jQuery('<select id="' + select_id + '">'); // no name, because of it's just a dynamic object, not really stores any information
        }

        if (options.onBeforeSelectCreated) {
          //options.onBeforeSelectCreated.apply(select); // TODO: documentation in header
        }

        // TODO: make it optional
        select.append(this._createOption('', 'Please select ' + options.levels[index]));
        select.append(this._createOption('', '---', false, true));

        for (k in this.json) {
          var v = this.json[k];
          if (v[options.fields.parent_id] == parent_id) {
            select.append(this._createOption(k, v[options.fields.name], current_id == k));
          }
        }

        if (index == 0) {
          this.el.after(select);
        } else {
          jQuery(this._getName(index - 1)).after(select);
        }

        if (options.onAfterSelectCreated) {
          options.onAfterSelectCreated.apply(this); // TODO: documentation in header
        }
        
        var self = this;

        select.change(function(e){
          var value = jQuery(e.target).val();

          for (i = (index + 1); i < options.levels.length; i++) {
            jQuery(self._getName(i)).remove();
          }

          if ('' != value) {
            self._createSelect.apply(self, [value, null, index + 1]);
            self.el.val(value);
          } else {
            self.el.val(jQuery(self._getName(index - 1)).val());
          }
        });
      }
    }

    this._createOption = function(value, name, selected, disabled) {
      return jQuery('<option' + (value != null ? ' value="' + value + '"' : '') + (selected ? ' selected="selected"' : '') + (disabled ? ' disabled="disabled"' : '') + '>' + name + '</option>');
    }

    this._getName = function(index) {
      return '#' + id + '_' + index;
    }

    jQuery.extend(options, {fields: {name: 0, parent_id: 1}});

    this.json = json;

    this.el = jQuery('#' + id).eq(0);
    this.el.hide();
    
    var tree = this._findValue.apply(this, [this.el.val(), []]);
    
    if (null != tree) {
      for (var i = 0, length = tree.length; i < length; i++) {
        this._createSelect.apply(this, [this.json[tree[i]][options.fields.parent_id], tree[i], i]);
      }
      this._createSelect(tree[tree.length - 1], null, tree.length); // next level
    } else {
      this._createSelect(null, null, 0);
    }

    return tree;
  }
});