Skip to content

Instantly share code, notes, and snippets.

@dmitry

dmitry/gist:152166

Created Jul 22, 2009
Embed
What would you like to do?
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;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment