Cannot set `val()` for select options containing tabs (`\t`) #2978

carols10cents opened this Issue Mar 8, 2016 · 4 comments


None yet

5 participants


I have a select element that contains options whose values contain tab characters. My original use case was a trailing tab (string\t), but I've also tested with leading tabs (\tstring) and tabs in the middle of non-whitespace (str\ting).

I called .val('value with tab') on the select element and expected the corresponding option to be selected since the values are identical, but no option is selected.

A few interesting observations:

  • I can work around this issue for the leading and trailing cases by removing the leading or trailing tab characters from the string I pass to .val(), but this is unexpected since the values don't match exactly.
  • Removing a middle tab character and passing that to .val() does not select the value, so there is no workaround for strings that have tab characters in the middle.
  • The behavior is the same with jquery 2.2.1, 3.0.0-alpha1 and edge.
  • With jquery 1.12.1, the leading and trailing tabs have the bug behavior but having a tab in the middle of the word and passing a matching string with a tab in the middle works as expected, so there was a regression at some point in this case.

JSFiddle: You'll see in the console what I expect the behavior to be compared to what the behavior actually is.

I searched for "tab" and "whitespace" and didn't see anything directly relevant; I did find this issue #1902 but it only mentions IE10 and I am seeing the unexpected behavior in Firefox 44 and Chrome 48.

dmethvin commented Mar 8, 2016

Yeah, this bug fix seems responsible. Here's the PR and discussion. If we pull out that fix it seems like the code you're trying to use may not work on IE9 or 10, but then again we seem to have broken it consistently everywhere with this.


Actually, it looks to me like f6302b0 was overzealous in expanding 541e734 to include trimming of values rather than just text. I think a partial revert is in order.

@timmywil timmywil added this to the 1.12.2/2.2.2 milestone Mar 8, 2016
mgol commented Mar 9, 2016

Is it really broken, though? From what I see we do the same that Chrome/Firefox does with one exception that we return null when no value is selected instead of an empty string:


I think your fiddle is broken with respect to my comment (what's with the val attributes and replaced whitespace?). Focusing on value, I see the same behavior in Chrome, Firefox, and Edge:

All three are defining the value IDL attribute as a stripped and collapsed whitespace version of the content attribute, treating it like text instead of following the spec.
EDIT: The browsers are fine; this is jQuery's fault. I forgot that the <option> valHook getter is also used in the <select> valHook getter.

Fixing this should consist of updating the <option> valHook to return elem.value directly when it is correct, and otherwise performing the full strip and collapse whitespace operation (which requires more than jQuery.trim) upon jQuery.text( elem ).

@timmywil timmywil self-assigned this Mar 9, 2016
@mgol mgol added the Attributes label Mar 11, 2016
@timmywil timmywil added a commit to timmywil/jquery that referenced this issue Mar 15, 2016
@timmywil timmywil Attributes: strip/collapse whitespace for set values on selects
Fixes gh-2978
@timmywil timmywil closed this in 7052698 Mar 17, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment