select imitation

by Vladimir

HTML

<select id="cats"></select>
<div id="display"></div>
<div id="itemListWrapper">
<ul id="itemList"></ul>
</div>

CSS

#itemListWrapper {
    height: 50px;
    overflow: scroll;
}
#itemListWrapper {
    position: absolute;
    display: none; 
}
#itemListWrapper.opened {
    display: block;
}
#itemList {
    width: 100%;
    margin: 0;
    padding: 0;
}

JavaScript

var kitchen = ['ukraine', 'italy', 'china'];
var items = [{
	title: 'Borsch',
	k: 'ukraine',
	color: 'crimson'
},{
	title: 'Galushki',
	k: 'ukraine',
	color: 'lightgreen'
},{
	title: 'Draniki',
	k: 'ukraine',
	color: 'brown'
},{	
	title: 'Palyanicca',
	k: 'ukraine',
	color: 'orange'
},{
	title: 'Pizza',
	k: 'italy',
	color: 'yellow'
},{
	title: 'Pepperoni',
	k: 'italy',
	color: 'rose'
},{
	title: 'Tomato-soup',
	k: 'italy',
	color: 'darkred'
},{
	title: 'Pasta',
	k: 'italy',
	color: 'red'
},{
	title: 'Green tea',
	k: 'china',
	color: 'darkgreen'
},{
	title: 'Boiled rise',
	k: 'china',
	color: 'biege'
},{
	title: 'Fried Fish',
	k: 'china',
	color: 'silver'
}, {
	title: 'Miso-soup',
	k: 'china',
	color: 'lightbrown'
}];

var html = '';
for(var i = 0; i < kitchen.length; i++) {
	html += '<option value="' + kitchen[i] + '">' + kitchen[i] + '</option>';
}
$('#cats').html(html);

function load(k) {
	var html = '';
	for(var i =0; i < items.length; i++) {
		if(items[i].k == k) {
			if(!html) {
				$('#display').text(items[i].title);
				$('#display').css('background',  items[i].color);
			}
			html += '<li value="' + items[i].title + '" style="background: ' + items[i].color + '">' + items[i].title + '</li>';
		}
	}
	$('#itemList').html(html);
}
load(kitchen[0]);

$('#cats').change(function() {
	load($(this).val());
});

$('#display').click(function(e) {
	e.stopPropagation();
	$('#itemListWrapper').toggleClass('opened');
});

$('body').click(function () {
	$('#itemListWrapper').removeClass('opened');
});

$('#itemList li').live('click', function() {
	$('#display').text($(this).text());
	$('#display').css('background',  $(this).css('background'));
});