1

This is related to Fire event each time a DropDownList item is selected with jQuery and How to fire an dropdownlist event instantaneously? but the answers there don't give quite what I need.

Given a dropdown selection in HTML with jQuery+JavaScript, and allowing for either mouse or keyboard interaction, I want to code such that an action will fire not just on final selection (''change'' event) but also when the user uses the keyboard up-arrow or down-arrow to change the selection without yet using the enter key to confirm that selection. In particular, in a dropdown to select color, I'd like to change the color of a swatch continually as the user arrows up or down through the options.

The following code is based in part on the discussion at Fire event each time a DropDownList item is selected with jQuery, but the "winning" version there doesn't work when keyboard is used to make selections, and it is a pretty complete failure on Safari & Google Chrome. My code here works fine in all recent versions of Firefox, and it works fine for mouse-based actions in Chrome and Safari; however, in Chrome when the user works with the keyboard, the only event I seem to be able to capture is the ''change''; ditto for Safari, for what it's worth.

  (function($) {
      $.fn.dropdownSelect = function(fn) {
          return this.each(function() {
              // I'd expect this to be the normal case for selecting with mouse, but only seems to work in Firefox.    
              $('option', this).click(function() {
                  fn();
              });
              // Selection via arrow keys. Only seems to work in Firefox.  
              $(this).keyup(function() {
                  fn();
              });
              // Next case is crucial for Safari and Chrome, should be harmless for Firefox.
              $(this).change(function() {
                  fn();
              });
          });
      }
  })(jQuery);

Then I invoke it like:

$('#color-dropdown').dropdownSelect(function () {
     // Act on it here.
});

I tried checking also for the ''keypress'' event, but to no avail. Any ideas?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Joe Mabel
  • 1,372
  • 10
  • 29

1 Answers1

0

You want 'keydown'. The keypress event does not capture control functions like arrows.

John Green
  • 13,241
  • 3
  • 29
  • 51
  • Good thought, but it doesn't seem to do it either (just tried it in response to your suggestion). Also, I'm pretty sure if that in any context where you'd get 'keydown', you'd also get the 'keyup' event I'm already looking for (and getting on Firefox). – Joe Mabel May 24 '11 at 22:32
  • Ok, I just put this through my own testing. Looks like the functionality is being handed over to the OS control which is taking it out of the control of the browser. This makes sense, actually... but it doesn't help you much. I think you might have to spin your own dropdown, or use one of the other prebuilts, like this one from fillament: https://github.com/fnagel/jquery-ui/wiki/Selectmenu – John Green May 24 '11 at 22:40
  • Thanks, I'll certainly take a look at that. At the very least, the code there might show how you have to address this problem. – Joe Mabel May 24 '11 at 22:48
  • Yeah... they get rid of the select and build an HTML version of it. : ) – John Green May 24 '11 at 22:48
  • Which would probably not be a very acceptable solution in my case, at least not unless and until their code becomes a standard part of jQuery. & I definitely don't want the look of their dropdown in the examples, though I'm sure it's all style-able. I certainly don't want to back off to the earlier branch of jQueryUI in which they built this... Oh, well, it still may be useful as something to study. – Joe Mabel May 24 '11 at 23:05
  • It isn't part of JQueryUI, it is a sideband that never quite made it in. It does accept themeroller, though, so it should just be 'correct' if you merge it with more jQuery UI. I use it with a JqueryUI 1.8 project. – John Green May 24 '11 at 23:17