How to catch the second select on <select > with jQuery?

Question

The first click expands the <option>,

the second click select one of them.

How to catch the second click?

Answer 1

If the selection has changed, the onchange method is called.

Answer 2

You could always use onclick on each option in the combobox. It's not pretty, but it should work:

<select>
    <option onclick="alert('May');">May</option>
    <option onclick="alert('June');">June</option>
    <option onclick="alert('July');">July</option>
</select>

Answer 3

jQuery version of Pete's answer which I think would satisfy the question asked

$("option").click(function(){
   alert($(this).text());
});

EDIT

Due to the above not being cross browser, I did some searching and came across a post here on stack overflow that might help out.

http://stackoverflow.com/questions/898463/fire-event-each-time-a-dropdownlist-item-is-selected-with-jquery

Answer 4

You can chain some events using jQuery's one function like this:

$('select').one('click', firstClick);

function firstClick(evt) {
    //do anything you might want to do
    $(evt.target).parent().one('click', secondClick);
}

function secondClick(evt) {
    //again, do you thing
    $(evt.target).parent().one('click', firstClick);
}

The one function will execute the event handler you give once and then remove it. This solution allows you to switch the handler on every click. Just be careful if you use this one. You also need to handle the blur event to reset the first handler.

You could also use jQuery's live function to minimize the number of event handlers you are creating, saving memory. This will also avoid some problems I could foresee with my first solution.

$('select option').live('click', selectHandler);

function selectHandler(evt) {
    //insert magic here
}