Выпадающий список + с чекбоксами
 

Привет. Помогите пожалуйста.

Есть выпадающий список с чекбоксами, нужно сделать чтобы он был с прокруткой в фиксированной ширине, то есть:

Сейчас так:



Нужно вот так:




Полностью файл js который отвечает за формирование списка:

var mcnt = [];
if (ie6 === undefined) { var ie6 = 0; }
function multSelect(num) {
	setTimeout(function() {
		for (var i = 1; i < num + 1; i++) { mcnt[i] = 0; convertSelect(i); }
	}, 10);
}
function convertSelect(id) {
	var mlist = document.getElementById('mlist' + id), divlist = document.getElementById('divlist' + id);
	divlist.style.position = 'relative';
	if (ie6) {
		var frm = document.createElement('iframe');
		frm.setAttribute('id', 'frm' + id);
		divlist.appendChild(frm);
		frm.style.position = 'absolute';
		frm.style.left = frm.style.top = 0;
		frm.style.width = frm.style.height = 0;
	}
	var msel = document.createElement('div');
	msel.setAttribute('id', 'msel' + id);
	divlist.appendChild(msel);
	msel.style.position = 'absolute';
	msel.style.left = msel.style.top = 0;
	msel.style.backgroundImage = 'url(' + design + 'img/expand.gif)';
	msel.style.cursor = 'pointer';
	msel.className = 'multselect';
	msel.innerHTML = '&nbsp; &nbsp; ' + ln_choose;
	msel.style.width = '180px';
	mlist.style.display = 'none';
	divlist.style.height = msel.offsetHeight + 'px';
	msel.onclick = function() {
		if (!mcnt[id]) {
			var mopts = document.createElement('div');
			mopts.setAttribute('id', 'mopts' + id);
			mopts.style.cursor = 'default';
			msel.appendChild(mopts);
			msel.style.backgroundImage = 'url(' + design + 'img/collapse.gif)';
			divlist.style.zIndex = z++;
			mcnt[id] = 1;
			for (var j = 0; j < (mlist.options).length; j++) mopts.innerHTML += '<input type="checkbox" name="mopts[' + j + ']" value="' + mlist.options[j].value + '"' + (mlist.options[j].selected ? ' checked' : '') + ' onclick="setOptions(' + id +', ' + j + ');"> ' + mlist.options[j].text + '<br>';
			if (ie6) { frm.style.width = msel.offsetWidth + 'px'; frm.style.height = msel.offsetHeight + 'px'; }
			function closeOpts(event) {
				event = event || window.event;
				if (!event.target) event.target = event.srcElement;
				if (event.target.id != 'mopts' + id && (event.target.parentNode).id != 'mopts' + id)  {
					msel.removeChild(mopts); msel.style.backgroundImage = 'url(' + design + 'img/expand.gif)';
					if (ie6) frm.style.width = frm.style.height = 0;
					mcnt[id] = 0; removeHandler(document, 'click', closeOpts);
				}
			}
			setTimeout(function() { addHandler(document, 'click', closeOpts); }, 10);
		}
	}
}
function setOptions(id, opt) {
	var el = document.getElementById('mlist' + id), opts = document.getElementById('opts' + id);
	el.options[opt].selected = el.options[opt].selected ? 0 : 1;
	var j = 0; opts.innerHTML = '';
	for (var i = 0; i < (el.options).length; i++) { if (el.options[i].selected) { opts.innerHTML += (j ? ' , ' : '') + el.options[i].text; j++; } }
}

и на странице:

<div id="divlist1" style="position: relative; height: 20px;"><select name="p3[]" id="mlist1" multiple="" style="display: none;">
<option value="1">опция</option>
<option value="2">опция</option>
<option value="3">опция</option>
</select><div id="msel1" style="position: absolute; top: 0px; left: 0px; background-image: url('/design/img/expand.gif'); cursor: pointer; width: 180px;" class="multselect">&nbsp; &nbsp; выбрать</div></div>

Пробовал так:

msel.onclick = function() {
		if (!mcnt[id]) {
			var mopts = document.createElement('div');
			mopts.setAttribute('id', 'mopts' + id);
			mopts.style.cursor = 'default';
mopts.style.height = '200px';
mopts.style.overflow-y = 'auto';
                        msel.appendChild(mopts);
			msel.style.backgroundImage = 'url(' + design + 'img/collapse.gif)';
			divlist.style.zIndex = z++;
			mcnt[id] = 1;

Но не получается, выводит вообще оконный список с прокруткой - на месте кликабельного списка.

Rocket-ajax,
может взять нормальный кастомизатор селекта а не времён ie6?

А как его внедрить? и где взять. Да и проще здесь подправить мне кажется )