Question

I’ve made a div based <select /> boxes to may them work as cross-browser ui.
The problem is, that i can’t find out how to filter nested selectboxes inside other selectboxes. I mean, make them work only for clicked element, and not for childs.

Here is a demo: http://jsfiddle.net/aspirinemaga/ejyRR/

Would like to make them work in that way:

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

I know it’s easy, but i can’t find out the right selector to make it work. Thanks in advance for your help and time.

EDIT – 2nd demo: http://jsfiddle.net/aspirinemaga/ejyRR/2/

Answer 1

Number of issues here

1. Your opening click event should be on .gui-selectbox-button, not .gui-selectbox and it should return false to ensure it doesn’t propagate.
2. You are always calling gui_selectbox_closeAll. You need to be closing all that are not parents of target. Fixed by $('.gui-selectbox-dialog:visible').not($(event.target).parents('.gui-selectbox-dialog')). Do similar thing for the button.
3. Your gui_selectbox_listAction is setting value for all the parents. You should be using closest() there instead.