Skip to content

Instantly share code, notes, and snippets.

@araslanov-e
Forked from FZambia/nested.js
Last active Aug 29, 2015
Embed
What would you like to do?
/**
*
* usage: $('#select-container').nested({url:'/path/to/backend/which/returns/options/'})
*
*/
(function($){
$.fn.extend({
//pass the options variable to the function
nested: function(options) {
//Set the default values
var defaults = {
url: '/',
hide:true,
empty:''
}
var options = $.extend(defaults, options)
var set_none = function(select) {
select.find('option[value=""]').attr('selected',true);
}
var set_disable = function(select) {
select.attr('disabled',true);
}
var clean = function(selects) {
selects.each(function(){
set_none($(this));
set_disable($(this));
})
}
var fill_select = function(next_select, data) {
var select = $(next_select);
var selected = select.find('option:selected');
select.find('option[value!=""]').not(selected).remove();
var options = '';
$.each(data, function(){
var value = this[0];
var text = this[1];
if (value==select.val()) {
$.noop;
} else {
options+='<option value="'+value+'">'+text+'</option>';
}
})
select.append($(options));
}
var get_options = function(name, id, next_select) {
if (id===options.empty) {
return;
}
$.post(options.url, {name:name, id:id}, function(data) {
fill_select(next_select, data);
}, "json");
}
var update = function(current_select, next_select) {
if (next_select==undefined) {
return false;
}
var name = $(current_select).attr('name');
var id = $(current_select).val();
get_options(name, id, next_select);
}
var initialize = function(selects) {
selects.each(function(index){
update($(this), selects.get(index+1));
})
}
var redisable = function(selects) {
var limit = false;
selects.each(function(index){
if (limit===true) {
$(this).attr('disabled',true);
set_none($(this));
if (options.hide===true) {
$(this).parent().fadeOut();
}
} else {
$(this).attr('disabled',false);
if (options.hide===true) {
$(this).parent().fadeIn();
}
}
value = $(this).val();
if (value===options.empty) {
limit = true;
}
})
}
var listen = function(selects) {
selects.each(function(index){
$(this).bind('change',function(){
update($(this), selects.get(index+1));
clean(selects.slice(index+1));
redisable(selects);
})
})
}
return this.each(function() {
var container = $(this);
var selects = container.find('select');
initialize(selects);
redisable(selects);
listen(selects);
});
}
})
})
(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment