dropdown test

by black strings

HTML

<div id="main">

</div>

JavaScript

var $canvas = $('#main');

//category
var Cat = function(name, id){
	this.name = name;
  this.id = id;
  this.widget = $('<select>');
  var h1 = $('<h2>').text(name);
  this.div = $('<div>').append(h1).append(this.widget);
  this.items = [];
}
Cat.prototype.add = function(item){
	this.items.push(item);
  this.widget.append(item.widget);
}
var cats = [];
for(var i=0;i<5;i++){
	cats.push(new Cat("Cat"+i, i+100));
}

//item
var Item = function(name){
	this.name = name;
  this.widget = $('<option>')
  this.widget.text(name);
}
var items = [];
for(var i=0; i<25; i++){
	var item = new Item('Item'+i);
  items.push(item);
}
items.reverse();


var counter = 0;
cats.forEach(function(cat){
	for(var i=0; i<5; i++){
  	cat.add(items.pop());
  }
});

var realCatIds = [101,103];


var result = $.grep(cats, function(e){ 
	return e.id == 	realCatIds[0]; 
});
$canvas.append(result[0].div);