Run function when a select option is selected twice in a row

Question

I have a AJAX-loaded dropdown that runs a function when it's changed, but I also want it to run the function if the option that is already selected is clicked. (For example, someone selects option A two times in a row, I want it to run the function both times without having to select a different option between them)

JAVASCRIPT:

$(document).on('change','#dropdown',function(e){
  //do stuff
}

HTML:

<select id="dropdown">
  <option value="optionA">option A</option>
  <option value="optionB">option B</option>
  <option value="optionC">option C</option>
</select>

You mean, run it if they open the drop down, and then close it without changing their choice? — gen_Eric, Dec 17 '13 at 21:03
Then the value isn't changing, so `change` is probably not the event you want. — p.s.w.g, Dec 17 '13 at 21:03
possible duplicate of [Is there a DOM event that fires when an HTML select element is closed?](http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed) — iambriansreed, Dec 17 '13 at 21:05
*I want it to run the function both times without having to select a different option between them* : Does this mean if user clicks the option first time function runs and other options are disable so that the user can only select the same option second time? — Zword, Dec 17 '13 at 21:09
@RocketHazmat: Yes, but only if they click within the dropdown, not if they click outside of it. — Geoffrey Burdett, Dec 17 '13 at 21:18

score 0 · Answer 1 · edited Dec 17 '13 at 22:13

0

It took a bit of experimentation, but there is a way to detect if the dropdown menu of the select was clicked.

Move your code into the click event, and wrap an if tag around it as such:

if(event.pageY<0)
{
    // The dropdown menu on the select was clicked!
}

The reason that only this if is needed, is because of the fact that both browsers I've managed to test this on, make it seem like the cursor is outside of the actual page when the event was triggered.

You can find the demo at http://jsfiddle.net/Entoarox/ATm43/.

The pageY property of the event object is one of the properties that jQuery normalizes for cross-browser consistency.

http://api.jquery.com/category/events/event-object/

Replace your on change script with:

$(document).on('click','#dropdown',function(event){
    if(event.pageY >= 0) return; // return and don't do anything 
    // The dropdown menu on the select was clicked!
    // do stuff
});

edited Dec 17 '13 at 22:13

iambriansreed

21,935
6
63
79

answered Dec 17 '13 at 21:44

Entoarox

703
4
8

Sorry if I took over your answer. There are numerous questions on SO about this idea but your answer is the only one I have seen that actually works. So I wanted it to be as complete as possible. Kudos. – iambriansreed Dec 17 '13 at 22:15
Any reason for the DV here? – iambriansreed Dec 17 '13 at 22:17
1

@iambriansreed Its not a problem, you simply expanded upon the rather basic information I provided, although my basic answer would solve the problem, adding details and mentioning that outside of jQuery the pageY value cannot be trusted absolutely is a good thing! – Entoarox Dec 17 '13 at 22:17
I like the idea, but it's not working for me in firefox or chrome on Mac. The event fires, but it also fires when the dropdown is clicked to dropdown. – Geoffrey Burdett Dec 18 '13 at 12:15
@GeoffreyBurdett Unfortunately as I dont have a mac, it is impossible for me to find out why it has different behaviour there. (What you can do is wrap a switch around the positioning check that forces it to only go off on the second click) – Entoarox Dec 18 '13 at 20:50
@GeoffreyBurdett I updated the demo fiddle to include the code to only trigger the check if the menu is open, please try http://jsfiddle.net/Entoarox/ATm43/3/ and see if that fixes your problem. – Entoarox Dec 18 '13 at 20:53

score -2 · Answer 2 · answered Dec 17 '13 at 21:15

-2

Use

$(document).on('select','#dropdown',function(e){
  //do stuff
}

or

$(document).on('click','#dropdown',function(e){
  //do stuff
}

answered Dec 17 '13 at 21:15

jtrumbull

818
9
19

-1 `.select()` is for selecting text http://api.jquery.com/select/ `.click` fires before a value is set – iambriansreed Dec 17 '13 at 21:17
My apologies, I was mistakenly referring to the jqxWidget, which fires a "select" event on thier' dropdown list. – jtrumbull Dec 18 '13 at 14:50
".click fires before a value is set" wouldn't matter in this example, as the value never needs to be set. It was indicated in the example that the drop down was meant to be clicked multiple times in succession. – jtrumbull Dec 18 '13 at 15:24

Run function when a select option is selected twice in a row

2 Answers2