Продвинутый SELECT
Встала проблема: надо на странице сделать select-box с множественным выбором, но такой чтоб глупый юзверь выбирал не удерживая ctrl, а ставил галочки по привычке, потому что объяснить ему как по-другому нереально...
Решений у проблемы как всегда два: простое, вместо селекта на страничке вывалить галки в div-е, но переделав дофига всего, и сложное, но интересное - javascript-ом схватить select и переделать его в див с галками, именно об этом этот пост.
Итак идея реализации: чтоб было не так все просто надо дать возможность переделать все стандартные селекты в продвинутые, точнее не все а только те, у которых специальный css-класс. И не просто в селекты с галаками, а если multiple, то с галками, если нет - то radio. Для этого идем по всем селектам в документе, смотрим на класс, если подходит, то создаем див с бродером как у селекта и такогоже размера, с полосами прокрутки. Внуть него надо запихать дивы с checkbox или radio со значениями и подписями к ним, взятыми из опций селекта. Чтоб была только вертикальная прокрутка запонять будем дивами, у которых overflow буджет none.
После почти всего дня мучений получился вот такой код:
function convertSelects()
{
var selects = document.getElementsByTagName('SELECT');}
for(var s=0; s<selects.length; s++){ select = selects[s]; if(select.className == 'advselect' && select.size) convertSelect(select); }
function convertSelect(obj)
{
var div = document.createElement("div");}
var id = obj.id;
div.style.backgroundColor = 'white';
div.style.color = 'black';
div.style.borderStyle = 'inset';
div.style.borderWidth = 2;
div.style.textAlign = 'left';
div.className = 'advselect';
div.style.overflow = 'auto';
div.style.width = obj.style.width;
div.style.height = obj.style.height;
var name = obj.name;
for(var i=0; i<obj.options.length; i++)
{
var opt = obj.options[i];}
if(obj.multiple) div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="checkbox" name="'+name+'[]" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
else div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="radio" name="'+name+'" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
obj.parentNode.insertBefore(div, obj);
obj.parentNode.removeChild(obj);
div.setAttribute('id', id);
Теперь как этим пользоваться (из комментария к оригинальному файлу advselect.js).
- Автоматическое преобразование select-box к продвинутым. В боди добавляем хэндлер OnLoad следующего содержания:
<body OnLoad="conversSelects();">
Для того чтобы быть преобразованным, select box должен иметь класс advselect и у него должны присутствовать стили выстоты и ширины, а также аттрибут size больший 1, например
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect> - Ручное преобразование: после каждого селекта, который должен быть преобразован добавляем вызов функции-конвертора, параметр которой - объект select-box, который должен быть преобразован. Например
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect>
...
</select>
<script>convertSelect(document.getElementById('rayon_id'));</script>
В результате получам вот такие селект-боксы:
Замечания. Имена селектов передаются в создаваемый check и radio элементы, в случае checkbox имя получается вида name[] т.е. массив, который более удобен для обработки на сервере. Аттрибут id от селекта передается в id созданного дива. Для корректного преобразования селекта к продвинутому, у оригинального должны быть прописаны стили ширины и высоты.
Кустомизация. Для изменения внешнего вида можно изменить в CSS класс div.advselect (общий вид) и div.advselect div (облик элементов списка).
И на последок еще одно важное замечание. Если форма в которой живет селект-бокс некорректно расположена в документе, например
<table ...>
<form ...>
<tr>
<td>
...
то свежесозданный продвинутый сеект работать не будет, точнее он будет появляться но не будет отдавать свои значения при сабмите формы. Причина этог мне видится в том, что форма занимает некорректное положение в DOM модели документа, и добаляемый элемент в силу непонятных причин вылазит за форму и не учавствует в ее сабмите.
Кому интересно пользуйтесь, но не забывайте плз давать ссылку на мой сайт 