1

I am triggering a event when the user changes a selection in a select menu. As you would imagine it works when the user selects a option that is different than what is already there but when it is the same nothing happens. I have tried changing it to a click event but that doesnt seen to work.

If anyone has a work around for this it could greatly be appreciated.

I have found some solutions to this issue but none of them seem to work for me.

I am also using backbone if this makes a difference to you

My event looks like this: 

'change .js-select'       : 'show_colours',

UPDATE:

Thanks for the feedback

My scenario is this.

I have four select menus with 0, 1 and 2 as the options. If the user selects anything but zero a block of colour tiles will appear below it so the user can click on a colour. This is the same for all of the select menus.

Now due to lack of space the user can only have one block of colours open at a time. So if the user wants to go back and change a colour on a closed block of colours they need to select a different option than what they already have because if they select the same the event to open the block of colours will not fire.

I hope that is clear.

David Jones
  • 4,275
  • 6
  • 27
  • 51
  • Why isn't the click event handler not working? Can you post your handler code? – Abhitalks Aug 01 '13 at 17:40
  • Much of the way that JavaScript interfaces with select boxes is by referring to each – Swivel Aug 01 '13 at 17:42
  • @abhitalks, iirc, onClick is not fired for – Swivel Aug 01 '13 at 17:44
  • @Swivelgames, yes it is. – Rick Calder Aug 01 '13 at 17:46
  • @Swivelgames It IS fired. – Abhitalks Aug 01 '13 at 17:47
  • Possible duplicate of http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed – Dima Kuzmich Aug 01 '13 at 17:51
  • @abhitalks Example? I just tried it. It may fire in some browsers, but it does not seem reliable. – Swivel Aug 01 '13 at 17:55
  • @RickCalder ^See above. – Swivel Aug 01 '13 at 17:56
  • @Swivelgames Please see: http://jsfiddle.net/SGZwg/ – Abhitalks Aug 01 '13 at 18:03
  • @abhitalks Bad solution http://fiddle.jshell.net/SGZwg/1/ – yckart Aug 01 '13 at 18:05
  • As I said before, it is not reliable. Currently, in Google Chrome 28.0.1500.95 neither of those Fiddles worked. Do not use this approach -- It may work in some browsers, but it is not standard, and it is not reliable. – Swivel Aug 01 '13 at 18:07
  • @abhitalks ^See above. – Swivel Aug 01 '13 at 18:07
  • @yckart Yes, that is bad, because alert steals the focus away and hence another click is required. Without alert, focus is not stolen and you can click on option. However, the fiddle was not a solution. It was created just to show an example to Swivelgames as he asked for a example to demonstrate that click event fires for select. See his request in comments relating to the third comment above. – Abhitalks Aug 01 '13 at 18:09
  • @Swivelgames "but it is not standard, and it is not reliable" Any source for that? The click event should be fired for all elements. If a particular Chrome version is not firing, then it must be a bug. – Abhitalks Aug 01 '13 at 18:14
  • @abhitalks It has never worked in any version of Chrome, IIRC. Please do not rely on this behavior. It will not work in IE, Chrome, or Safari. My source for its reliability is experience. Download Chrome or open up IE and try it for yourself. Don't rely on me to prove it to you :P Do some Google searching, it's not hard to find. I've found tons of evidence just on StackOverflow itself. The point is, its not reliable. If you need more evidence than that, then look for it. If you want to disregard this and use it anyway, then do so. ;) lol – Swivel Aug 01 '13 at 18:21
  • I have no idea what you've done to your Chrome but I am using Version 28.0.1500.95 m and it works just fine for me. It's not a practical solution but it DOES work. Oh and it works just fine in IE11 too. Just saying. – Rick Calder Aug 01 '13 at 18:27
  • @Swivelgames Am have Chrome 25 and it works just fine. In fact it is working on all browsers I have (IE, Chrome, FF, Safari, and Opera). Yes, I use all these browsers to test cross-browser functionality of my apps. BTW/OTOH: Yes, I agree with you on that click should be avoided esp on select, change event is preferred. But then, point is that click is a standard event and there is no reason it shouldn't be reliable. – Abhitalks Aug 01 '13 at 18:37
  • @abhitalks I know there has been many issues in the past with it not working across all browsers and being unreliable. They may have fixed it recently, but I know for a fact it does not work in previous versions. See also: http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html -- I am on Mac OS X, so there might be an issue with it on OS X. The point is that it isn't reliable, and the proper solution is to use `onChange`. `onClick` is not suitable for select elements. – Swivel Aug 01 '13 at 18:47
  • 1
    @Swivelgames the link you gave is not for "select", but for "option". But, yes I already agree with you on the point of proper usage. :) Ceasefire please! – Abhitalks Aug 01 '13 at 18:53
  • @abhitalks, hahaha, sorry. I wasn't trying to barrage you. It looks like it is indeed a bug, and not a standard (my apologies!), but still seems to be pretty inconsistent. There seems to be a lot of issues surrounding select boxes. I think there needs to be a lot of focus on fixing the bugs, as well as making them style-able, but that's a different topic. – Swivel Aug 01 '13 at 21:42

1 Answers1

3

You can try something like this:

var open = false;
$('select').on('mouseup', function () {
    if (open) alert(this.value);
    open = !open;
});

http://fiddle.jshell.net/6LYbu/1/

Update

Since this will not work on touchdevices, we should listen for the change-event too:

var open = false;
$('select').on('mouseup change', function (e) {
    if (open || e.type === 'change') alert(this.value);
    open = !open;
});
yckart
  • 32,460
  • 9
  • 122
  • 129
  • Thanks for the feedback, although this doesnt seem to work in Chrome, it worked in firefox though :s – David Jones Aug 01 '13 at 17:59
  • Strange I also have 28.0.1500.95, im on Mac os x 10.6.8 – David Jones Aug 01 '13 at 18:08
  • @DavidJones What example doesn't work, the first or the later? – yckart Aug 01 '13 at 18:12
  • +1 for mouseup. @DavidJones it works on Chrome for sure. But, Chrome delays firing the event a little. If you click quickly, it gets missed and click is fired. If you button-down (mousedown) and then release the button slowly (mouseup), it will work alright. Same behaviour with IE9. – Abhitalks Aug 01 '13 at 18:46
  • Nope, the fiddle still doesn't seem to work in chrome, im at home now ( originally tried it at work ) on my mac book air running chrome 28.0.1500.95, but it works in firefox – David Jones Aug 01 '13 at 22:08
  • 47.0.2526.106 version and it still doesn't work. So nope for mouseup. – Laci Dec 18 '15 at 23:28