Question

The first click expands the <option>,

the second click select one of them.

How to catch the second click?

Answer 1

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
}