Question

I am trying to make a dropdown combobox (didnt want to try JQuery plugins this one time).

This is my HTML:

<div style="display: table-cell; width:150px; z-index:-1;" id="supdiv">
        <input size='10' id='supinput'>
            <div id='supsel' style='position:absolute;z-index:0;background-color:#b0c4de;'>
            <input type ='checkbox' value='0' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='1' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='2' id = 'supplier[]' name='supplier'>A</br>
            <input type ='checkbox' value='3' id = 'supplier[]' name='supplier'>A</br>

            <input type='button' value='OK' id='supclose'>
            </div>
</div>

When the page loads, I hide the supsel div.

$('#supsel').hide();

I show the div when the focus comes to supinput. Also, I hide the div when OK button is clicked.

$('#supinput').focus(function(){
            $('#supsel').show()
    }); 
 $('#supclose').click(function(){
            $('#supsel').hide()
    });

Now my problem is, I want to hide the div if the user clicks anywhere else on the page or the focus is moved to any other input or area, But i want the div to keep showing till the time the user is selecting the checkboxes or the focus is on SUPSEL. How do i do that?

Answer 1

jsBin demo

</br> shoud be <br />
and <input> should be <input />

than just add:

$('#supdiv').on('click',function(e){
    e.stopPropagation(); // prevent clicks on your parent div to propagate to doc.
});
$(document).on('click focusout',function(event){   // register clicks focusouts
  if(event.target.id !== 'supdiv'){  // if click was not on your parent bropbox
    $('#supsel').hide();             // than do something about it! ;)
  }  
});