Главная
 

Поле множественного выбора с использованием JQuery

Дата публикации: 
Втр, 2012-05-22 15:40

Поле множественного выбора с использованием JQuery Не так давно в рамках разработки дизайна сайта мне понадобилось реализовать определенный вид поля с возможностью множественного выбора (рис. 1). Причем таких полей в том проекте, за который взялась, было немало (штук 20-30) . Причем заказчика устраивал именно такой вид и чтобы блок с вариантами появлялся при наведении на поле, где потом отображаются результаты – в общем, минимум дизайна – максимум функционала.

Для начала определим, определим, что же представляет из себя этот блок:

- блок общий

- - блок поля для результатов (вначале в нем написано – «Любой»)

- - блок вариантов (изначально невидимый)

- - - вариант 1 (чекбокс и сопутствующий ему label)

- - - …

- - - вариант n (чекбокс и сопутствующий ему label)

Или в виде HTML

Теперь необходимо сделать так, чтобы блок с вариантами выбора всплывал при наведении мыши – этот функционал реализуется по подобию функционала всплывающей подсказки: есть родительский блок с position:relative и текстом, при наведении на который должна всплывать подсказка, в нем есть блок с position:absolute и display:none. При появлении псевдокласса hover для родительского объекта назначаем для дочернего display:block. Вот как это выглядит в CSS

.multiSelectBlock { 
   font-size: 13px; 
   position: relative; 
   margin-left:53px; 
} 
.multiSelectInBlock { 
   border:1px solid #036; 
   border-top:none; 
   padding:4px; 
   position: absolute; 
   display:none; 
   width:155px; } 
.multiSelectBlock:hover .multiSelectInBlock { display:block; z-index:1000;}

В общем - ничего сложного – теперь при наведении мыши блок всплывает

Теперь самое интересное – нужно сделать так, чтобы: 1) У всех чекбоксов, которые являются дочерними для блоков с классом multiSelectBlock появилась реакция на изменение 2) При изменении упомянутых выше чекбоксов в блок поля для результатов добавлялись/удалялись необходимые элементы Очевидно, что лучше получить доступ к чекбоксам и упомянутым полям с помощью известного нам класса родительского элемента. Тем более, что родительских элементов в моем случе было 20 шт, а класс у них один. Самый оптимальный вариант для поиска и ассоциации – использовать возможности JQuery. Создаем функцию:

$('#form_filter') .find('.multiSelectInBlock input').change(function() { 
  //тут описываем действия в ответ на изменения чекбокса 
});

Этот вызов позволяет задать определенные действия на изменение найденных input. Сначала получаем доступ к объекту формы, ищем в нем все нужные нам inputы (можно было искать input [type=checkbox], но для моей задачи можно было и обойтись без уточнений ). Если посмотреть на HTML, то понятно, что внутрь блока для результатов мне нужно было помещать текст, который содержится внутри тэга Label соответствующего input. Поскольку именно инпут является вызывающим эту функцию элементом, то команда $('label[for="'+this.name+'"]').html() будет содержать ссылку на нужный Label, а запись this.parents('.multiSelectBlock').find('.multiSelectInput') даст ссылку на элемент поля. Получается такая команда:

$('#form_filter') .find('.multiSelectInBlock input').change(function() { 
   //строим строчку вывода 
   sttt=$('label[for="'+this.name+'"]').html(); // ссылка на элемент Label 
   input_t=this.parents('.multiSelectBlock').find('.multiSelectInput'); // на элемент поля вывода 
   steck=input_t.html(); 
   if (this.checked) { 
      if (steck.indexOf('Любой')>-1) // если это первый выбор 
      { input_t.html(sttt); 
      } else { 
      input_t.append(', '+sttt); 
      } 
   } Else //если чекбокс не выбран 
   { 
      n2=steck.replace((', '+sttt),''); 
      n2=steck.replace(sttt,''); 
      n2=n2.replace(' ,',''); 
      if (n2.length<3) { 
            n2='Любой'; 
      } 
      input_t.html(n2); 
   } 
})

Теперь осталось поставить вызов этой команды на загрузку документа и все заработает.

Изображения: 

Связаться с нами