2008-02-27 17:55:22

Продвинутый SELECT

Про работу JavaScript

Встала проблема: надо на странице сделать 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).

  1. Автоматическое преобразование 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>
  2. Ручное преобразование: после каждого селекта, который должен быть преобразован добавляем вызов функции-конвертора, параметр которой - объект 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 модели документа, и добаляемый элемент в силу непонятных причин вылазит за форму и не учавствует в ее сабмите.

Кому интересно пользуйтесь, но не забывайте плз давать ссылку на мой сайт