3

I've got a SELECT element whose contents (OPTION elements) get loaded via AJAX and inserted on ready and when a different SELECT is changed. Both SELECTS have two OPTION elements appended to the list of ones loaded via AJAX:

<option disabled="disabled"></option>
<option value="edit">Edit&hellip;</option>

I've got the following jQuery event binding in the on ready:

$('#theSelect').bind('change click', handleSelection);

The handleSelection() method then intercepts the "Edit..." option being selected, switches the selection back to the previously selected option, and fires other functions that display a dialog which allows the user to edit the options in the menu. This works great in Safari & Chrome, but there's one case that doesn't work in Chrome: if there are no options to load via AJAX, so only the disabled & "Edit..." options are visible, it will not fire an event on the "Edit..." option being selected. This seems to be because, in Chrome, the "Edit..." option is selected by default (because it's the first enabled option; Safari, on the other hand, selects the disabled option because it's the first option) and it only fires change events for SELECT elements, not clicks (why I listen to both click & change), but when "Edit..." is already selected, it's not actually changing so doesn't fire an event.

So, how can I work around this? Do I need to intercept all focus events and do the dirty work to interpret what's going on? Is there a way to get Chrome to select the disabled option instead of "Edit..."?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
morgant
  • 2,135
  • 2
  • 19
  • 28
  • Why don't you unify the behavior in all browsers, by explicitly selecting the disabled option on page load, in browsers where it is not selected (Chrome)? You'll avoid confusing users, and you'll have the change event fired. – Slavo Jun 06 '12 at 16:33
  • Or... if "Edit..." is by default selected why not have the page setup for it? That way Safari users don't have to reselect "Edit..." to get the appropriate options. – Shaded Jun 06 '12 at 16:35
  • Chrome 11 selects disabled option by default. I suggest to make it enabled and be sure to always reset it to first state - on page reload, browsers tends to leave options as they were selected. – Marius Balčytis Jun 06 '12 at 16:44
  • @Slavo Good call, I'll see what I can do there. There's currently quite a bit of complexity due to the fact that the disabled option shouldn't be selected by default unless there are no other options, plus the handlers I have to make it so the "Edit..." option is not actually selectable (just temporarily to bring up the dialog and is immediately reset to the previous selection). – morgant Jun 06 '12 at 16:52
  • @barius I'm testing on Chrome 19.0.1084.54 under Mac OS X 10.7.3 Lion. Since the options are loaded via AJAX, I have not found Safari or Chrome to re-select previous selections on page load since there are no options there, but it's a good consideration. – morgant Jun 06 '12 at 16:56
  • @Slavo That worked. Should've thought of that (doh!) and I posted an answer, but if you want to post an answer I'll likely accept it instead. – morgant Jun 06 '12 at 18:44
  • Accept your own answer :) I think there was even a badge for that :) Glad you made it work. – Slavo Jun 07 '12 at 08:24

1 Answers1

1

At Slavo's suggestion in the comments, I forced all browsers to make the first option be selected upon AJAX injection:

// force select the first option (fixes a Chrome issue)
$('#theSelect option:selected').removeAttr('selected')
$('#theSelect option:first-child').attr('selected', 'selected');

This standardizes the browser behavior and makes Chrome select the disabled option instead of defaulting to the enabled "Edit..." option.

Community
  • 1
  • 1
morgant
  • 2,135
  • 2
  • 19
  • 28