How can i get Select box close event when click out of the select box any where in window?

Question

How can i get Select box close event when click out of the select box any where in window.

My requirement is. I want to focus on another input on select box close event.

I tried with so many j Query events but i can't find any click event on window (browser) when select box is open.

Here i am sharing you my step to check an example.

When click on select box and you'll have 'body clicked' in Console.
Click outside of the box any where in window and you'll find that select box is close but you won't get any event. :(
I am getting an on Change event but only when i select some value, but i want if someone click out side of select box the it should be close as we have but we can drive focus on other element as well.

Please find following static example for the same, it's very simple code (example), so I am not generating jsfiddle.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(e) {
        $(window).click(function(){
          console.log("body clicked");
        });
      });
    </script>
  </head>

  <body>
    <select id="mySelect">
      <option value="0">Initial Value 1</option>
      <option value="1">Initial Value 2</option>
      <option value="2">Initial Value 3</option>
      <option value="3">Initial Value 4</option>
    </select>
  </body>
</html>

http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed — Nibin, Nov 24 '14 at 06:09

score 1 · Answer 1 · answered Nov 24 '14 at 07:04

There is no onClose event for select element. You can try the $.focusout event handler with something like this:

$('#mySelect').focusout(function(){
    console.log('Dropdown list 1 losing focus...');
    $('#anotherElement').focus();
});

This way, when you click outside of the box, the focusout event will be fired, and it will trigger another element's focus event.

Fiddle available here.

$(document).ready(function (e) {
    $('#mySelect1').focusout(function(){
        console.log('Dropdown list 1 losing focus...');
        $('#mySelect2').focus();
    });
});

select{
    margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myselect1">Dropdown list 1</label>
<select id="mySelect1">
    <option value="0">Initial Value 1</option>
    <option value="1">Initial Value 2</option>
    <option value="2">Initial Value 3</option>
    <option value="3">Initial Value 4</option>
</select>

<br />

<label for="myselect2">Dropdown list 2</label>
<select id="mySelect2">
    <option value="0">Initial Value 5</option>
    <option value="1">Initial Value 6</option>
    <option value="2">Initial Value 7</option>
    <option value="3">Initial Value 8</option>
</select>

Thanks, but $.focusout won't work, it should require 2 time click out of the select element to blur and change the focus. — Ajoshi, Nov 24 '14 at 08:29
Not sure what you meant. You're saying there should be a double-click before the focus changes? Then will need the [`dblclick`](http://api.jquery.com/dblclick/) event then. — ivan.sim, Nov 24 '14 at 16:19

How can i get Select box close event when click out of the select box any where in window?

1 Answers1