Предположим, что имеется задача создать двух- или более уровневое меню в списке <select> и при этом нужно подчеркнуть, что выбор раздела означает выбор всех опций раздела - выделить все опции, но не вручную.

Например, на странице "Поиск"  этого форума есть такое меню. В нём можно сделать как одиночный, так и множественный выбор. Есть в нём и выбор раздела, при котором автоматического выделения подразделов не происходит, но подразумевается. И вот, мы захотели указать это явно.

Понятно, что тег <optgroup label="Раздел ХХ">  не поможет, потому что он приводит к невозможности выделения строки раздела в списке (которая выделена жирным наклонным шрифтом). Зато, строки приходится как-то выделять по отношению к названиям разделов. Воспользуемся этим признаком, чтобы обнаружить, попал выбор на раздел или на обычный пункт. (Можно, конечно, опциям приписать скрытые признаки, но это будет дублирование явных признаков.)

Для двухуровневого списка с выделением пунктов специальными символами код для группового выделения раздела будет такой:

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

Вот как выглядел бы скрипт для выбора групп подразделов форума (скопированный со страницы поиска и урезанный трёхуровневый список). Способ выделения уровней другой, поэтому скрипт несколько другой.


Куда двигаться дальше?
Последний пример со сложным длинным двухуровневым списком разжигает аппетиты на усовершенствование скрипта группового выделения. Как показывает непродолжительная работа с результатом, возникают пожелания:

1) сейчас группа только выделяется, а хорошо бы, если бы выделенная группа 2-го уровня снимала выделение по клику на заголовке и удержании Ctrl.
2) если при выделенной группе и удержании Ctrl кликнуть по невыделенной группе выше, то происходит ожидаемое - выделяется 2-я группа, но если кликнуть по невыделенной группе, расположенной ниже - выделится только одна строка (IE, FF).

17.апр.2006 - html-часть примера значительно сокращена, чтобы тема быстрее загружалась.  

Это сообщение отредактировал(а) 12345c - 17.4.2006, 01:05

3) Ctrl на фоне выделенной группы не снимает выделение.

(Поправка: этот список не двух-, а трёхуровневый.)

Все эти признаки вызваны, как можно догадаться, тем, что selectedIndex при Ctrl (и Shift) не меняет своего положения. Таким образом, в распоряжении нет свойства, показывающего, по какой option кликнули (onclick на option тоже не поддерживается). Для полного комфортного решения понадобится код гораздо большей сложности, эмулирующий обнаружение клика по элементу. Малым увеличением сложности можно обойтись, если просто не обрабатывать клики при нажатой Ctrl или Shift. С учётом замечаний код функции и её вызов становится таким:

(изменения в числе параметров и в 6-й строчке)

Это сообщение отредактировал(а) 12345c - 11.4.2006, 03:55

 Думаю так будет лучше  
здесь была 1-я версия скрипта... 

Это сообщение отредактировал(а) Ciber SLasH - 17.4.2006, 18:48

Ciber SLasH, а в чём общий замысел? Ctrl иногда "прорывается" в твоём списке, когда не надо. Это происходит, когда вверху что-то выделено, а кликаешь ниже на заголовок группы. А если на группу сверху, то, наоборот, работает как обычное мультивыделение. Т.е. как противоположность моему первому коду. В моём 2-м коде Ctrl или Shift надёжно отрубают всякую попытку автоматики вмешаться.

Хотел сделать так, чтобы можно было выделять несколько групп, но не проверил как работает, если начинать снизу.

Тут, всё же, несменность selectedIndex всёс портит. Причём, в FF это можно решить, т.к. он понимает клик на option, а в остальных - ...

Вот, доделал скрипт:
здесь была 2-я версия скрипта... 

Это сообщение отредактировал(а) Ciber SLasH - 17.4.2006, 18:48

(Не хватает пояснения, что этот  скрипт делает. Поясню для читателей.)

Скрипт Ciber SLasH делает групповое выделение подсписков, если кликнуть по заголовку раздела, выделенному в примере цветом. Кроме этого, если кликнуть по другому разделу, удерживая Ctrl, выделения прежней группы не пропадёт.

Заметил недостатки выделений. (Что неудивительно для сложной логики.)

1) если таким способом выделить 2 раздела, а потом кликнуть на одном из выделенных полей, вылетает ошибка (IE). По её причине, вероятно, повторный клик по разделу после ошибки не приводит к групповому автовыделению;
2) если, при Ctrl, убрать все выделения - ошибка;
 

3-я версия...

В SELECT-те должны стоять такие события:

Состояния milti-select'а

Добавлено @ 18:57 
Проверям, тестим на баги...  

4-я версия:
[+] Теперь можно и снимать выделение с группы, нажав с удержанием <Ctrl> на подкатегории
 

Не снимается (IE), кроме 1 строчки. И вернулась ошибка с групповым до-выделением, если кликнуть по группе вверху, но одиночное довыделение, если по группе внизу выделенной группы.

Может быть, хитро над оподключать? Я делал так:
 


о, так работает исправно, IE,FF1.06 

Это сообщение отредактировал(а) 12345c - 20.4.2006, 18:26

12345c, забыл ещё добавить onKeyDown='regKey(event)', т.е.
 

Комментарии и подробности по моей доработки в аттаче... 

Присоединённый файл ( Кол-во скачиваний: 27 )
 __________________.zip 6,95 Kb