"Деревянный" комбобокс на JavaScript

Источник: pvobr

При заполнении различных форм удобно делать выбор из меню. Распространенным является меню с выпадающим списком (комбобокс). Однако стандартный комбокс (хтмл-тег "select") не всегда является оптимальным решением. Например, если список большой, то листать его неудобно. Трудно понять, где находится искомый элемент. Если данные списка представляют собой выборку, имеющую иерархическую организацию, то более естественным будет использование дерева. По умолчанию, в начальный момент все поддеревья свернуты. Пользователь с помощью нескольких кликов разворачивает элементы дерева и находит нужный ему элемент.
Переход к примеру.

Код "деревянного" комбобокса

<html>
<head>
<script language="JavaScript">
function toggle( obj ) 
{
 var val = obj.value;
 var id = "" + obj.id;
 var idDiv = "th" + id.substr(2);
 var objDiv = document.getElementById( idDiv );
 if( val == "+" ) 
 {
  obj.value = "-";
  if( objDiv ) 
  {
   if( id == "bu0" ) objDiv.style.visibility = "visible";
   else objDiv.style.display = "inline";
  }
 }
 else
 {
  obj.value = "+";
  if( objDiv ) 
  {
   if( id == "bu0" ) objDiv.style.visibility = "hidden";
   else objDiv.style.display = "none";
  }
 }
 return false;
}
var objSel = null;
function clickmenu( obj )
{
 if( objSel == obj ) return false;
 
 if( objSel != null )
 {
  objSel.className = "elnon";
 }
 
 objSel = obj;
 objSel.className = "elsel";
 
 var o = document.getElementById( "whomName" );
 if( o ) o.innerHTML = objSel.innerHTML;
 
 o = document.getElementById( "bu0" );
 if( o ) toggle( o );
 return false;
}
function test()
{
 if( objSel == null ) 
 {
  alert( "Кому?" );
  return false;
 }
 alert( objSel.id );
 return false;
}
</script>

<style>
 .rshift { position:relative; left:20px; }
 .butsm { width:16px; height:16px; font-size:6pt; }
 .elnon { color:#000000; cursor:pointer; }
 .elsel { color:#ffff00; background-color:#0000ff; }
 .elfly { color:#cccc00; }
 .treemenu { height:200px; overflow:scroll; position:relative; z-index:100; background-color:#ddeeff; width:400px; 
border-color:#000000; border-style:solid; border-width:1px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>'Деревянный' комбобокс</title>
</head>

<body bgcolor="#FFFFFF">
<h3>Сообщение
      
<form name="form1">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
 <tr> 
  <td width="20" align="center" class="red" valign="top"><b>*</b></td>
  <td width="100" align="left" class="normal" valign="top"><b>Кому:</b></td>
  <td>
 
<div style=""border-color:#000000;" border-style:solid; border-width:1px; width:400px">
 <input type="button" value="+" id="bu0" onclick="return toggle(this)" class="butsm">
 <span id="whomName">?</span>
</div>

<div id='th0' class='treemenu' style='visibility:hidden'>
 <span id='me0_1' class='elnon' onclick='clickmenu(this)'>Администрация полигона</span><br>
 <input type='button' value='+' id='bu1' onclick='return toggle(this)' class='butsm'><b>k333</b><br>
 <div class='rshift' id='th1' style='display:none'>
  <span id='me52_3' class='elnon' onclick='clickmenu(this)'>Администрация кафедры 333</span><br>
  <input type='button' value='+' id='bu2' onclick='return toggle(this)' class='butsm'><b>Преподаватели</b><br>
  <div class='rshift' id='th2' style='display:none'>
   <span id='me3' class='elnon' onclick='clickmenu(this)'>Артемьева Кристина (artemida)</span><br>
   <span id='me1' class='elnon' onclick='clickmenu(this)'>Борзой Андрей (borz)</span><br>
   <span id='me13' class='elnon' onclick='clickmenu(this)'>Древний Юрий (drevn)</span><br>
   <span id='me12' class='elnon' onclick='clickmenu(this)'>Лохматый Андрей (learner33)</span><br>
  </div>
  <input type='button' value='+' id='bu3' onclick='return toggle(this)' class='butsm'><b>Студенты</b><br>
  <div class='rshift' id='th3' style='display:none'>
   <span id='me4' class='elnon' onclick='clickmenu(this)'>Laertsky Ivan (lamer)</span><br>
   <span id='me123' class='elnon' onclick='clickmenu(this)'>Столетов Павел (astronom)</span><br>
   <span id='me103' class='elnon' onclick='clickmenu(this)'>Утконосов Альберт (politruk)</span><br>
   <span id='me19' class='elnon' onclick='clickmenu(this)'>Филонов Александр (ufo_1)</span><br>
  </div>
 </div>
 <input type='button' value='+' id='bu4' onclick='return toggle(this)' class='butsm'><b>Фондовый рынок</b><br>
 <div class='rshift' id='th4' style='display:none'>
  <span id='me10_3' class='elnon' onclick='clickmenu(this)'>Администрация кафедры Фондовый рынок</span><br>
  <input type='button' value='+' id='bu5' onclick='return toggle(this)' class='butsm'><b>Преподаватели</b><br>
  <div class='rshift' id='th5' style='display:none'>
   <span id='me1' class='elnon' onclick='clickmenu(this)'>Бушков Андрей (bushk)</span><br>
   <span id='me21' class='elnon' onclick='clickmenu(this)'>ГК Алор1 (alor1)</span><br>
   <span id='me2' class='elnon' onclick='clickmenu(this)'>Грелкин Юрий (yura)</span><br>
  </div>
  <input type='button' value='+' id='bu6' onclick='return toggle(this)' class='butsm'><b>Студенты</b><br>
  <div class='rshift' id='th6' style='display:none'>
   <span id='me38' class='elnon' onclick='clickmenu(this)'>Broker Izia (broker)</span><br>
   <span id='me22' class='elnon' onclick='clickmenu(this)'>One User (user1)</span><br>
   <span id='me23' class='elnon' onclick='clickmenu(this)'>Two User (user2)</span><br>
   <span id='me21' class='elnon' onclick='clickmenu(this)'>ГК Алор22 (alor22)</span><br>
  </div>
 </div>
</div>
   
  </td>
 </tr>
</table>

<div style=""xposition:absolute;" top:100px; z-index:11;">
<textarea class="normal" name="question" style=""HEIGHT:" 200px; WIDTH: 500px" cols="10" rows="80"></textarea>

<a href="#" onclick="return test()">Ввод</a>
</div>
</form>

</body>
</html>

Переход к примеру.

Каждое поддерево хранится в div-теге и имеет уникальный идентификатор с префиксом th. Чтобы поддерево в свернутом виде не занимало места, оно имеет style='display:none' (за исключением корневого div'а, который имеет style='visibility:hidden', иначе проблемы в Firefox 1.5). Внутри поддерева имеется кнопка для развертки/свертки (обработка события onclick='return toggle(this)') и набор вложенных поддеревьев и/или конечных элементов дерева, которые можно выбрать (обработка события onclick='clickmenu(this)') и которые в начале имееют class='elnon'.
Функция clickmenu( obj ) востанавливает класс у ранее выбранного элемента дерева, присваивает новому элементу класс "elsel", обновляет текстбокс "whomName", сворачивает дерево.
Функция toggle( obj ) инвертирует надпись кнопки и делает видимым/невидимым поддерево.
Div-тег корня дерева имеет класс treemenu, а поддеревья - класс rshift для сдвига отображения вправо.
Пример тестировался в браузерах IE 7.0 и Firefox 1.5.

"Деревянный" комбобокс на JavaScript (исходники)

Код "деревянного" комбобокса

Комментарии