Привет. Помогите пожалуйста.
Есть выпадающий список с чекбоксами, нужно сделать чтобы он был с прокруткой в фиксированной ширине, то есть:
Сейчас так:
Нужно вот так:
Полностью файл 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 = ' ' + 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"> выбрать</div></div>