Вложенные множественные поля выбора

Question

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

Вот демонстрация: http://jsfiddle.net/aspirinemaga/ejyRR/

Хотелось бы заставить их работать таким образом:

<div class="gui-selectbox">
  SELECTBOX1
  <div class="gui-selectbox">SELECTBOX2</div>
</div>

Я знаю, что это легко, но я не могу найти правильный селектор, чтобы он работал.Заранее благодарим за помощь и время.

РЕДАКТИРОВАТЬ - 2-я демоверсия: http://jsfiddle.net/aspirinemaga/ejyRR/2/

Answer 1

Количество ошибок здесь

1. Ваше событие открытия клика должно быть на .gui-selectbox-button, а не .gui-selectbox, и оно должно возвращать false, чтобы гарантировать, что оно не распространяется.
2. Вы всегда звоните gui_selectbox_closeAll.Вы должны закрыть все, что не являются родителями цели .Исправлено $('.gui-selectbox-dialog:visible').not($(event.target).parents('.gui-selectbox-dialog')).Сделайте то же самое для кнопки.
3. Ваш gui_selectbox_listAction устанавливает значение для всех родителей.Вместо этого вы должны использовать closest().