1

I'm using following html to get the selected-by-default disabled option "Select a town" as a kind of placeholder. 

<select name="town">
    <option selected disabled value="xx">-- Select a town --</option>
    <option value="1">Paris</option>
    <option value="2">London</option>
    <option value="3">Budapest</option>
</select>

Now I'd like to test if any option has been selected by the user, or if it's still empty.
I thought testing the select value using jquery ( $('select[name="town"]').val(); ) would return the value "xx".
Instead of that, .val() returns null.

I found no trace of this behaviour in the doc (http://api.jquery.com/val/).

Can I rely on .val() returning null when a disabled option is selected? Is it documented anywhere?

Or do I have to check against both null and the actual value of the value attribute ("xx" in the above example)?

fpierrat
  • 739
  • 7
  • 25
  • 1
    `val()` returns `null` because disabled form elements do not contribute their values to a form. See [this old bug report to jQuery regarding the behavior](https://bugs.jquery.com/ticket/13097). – Heretic Monkey Dec 17 '18 at 20:33
  • Why would you ever have `selected` and `disabled` on same option? Doesn't make sense – charlietfl Dec 17 '18 at 21:25
  • @fpierrat Here's a jsfiddle. http://jsfiddle.net/RachGal/r3fy8k6u/ – Rachel Gallen Dec 17 '18 at 21:36
  • @charlietti: It seems I'm not the only one it makes sense to: https://stackoverflow.com/a/5859221/3872061, https://stackoverflow.com/a/22033973/3872061, https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/ and so on... – fpierrat Dec 17 '18 at 22:06
  • @Heretic Monkey very interesting report, thanks. – fpierrat Dec 17 '18 at 22:34

1 Answers1

0

You can not select a disabled option, therefore the value (no matter what you set it as) will always return null. This is the intended behaviour.

While the docs doesn't specify about disabled options, it does say

if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null

This would also be expected of disabled options too. You can still test for it though!

We can check whether the value returns null by using an if statement. The following if statement will return true if the value isn't null

if ($('select[name="town"]').val() != null) {
   console.log('Option selected.');
}

If you want to test for the other options, you can replace != null with == value. In essence you could use this as a multiple if, else if, else statement.

Alternatively, you can get the value of the disabled selected option this way:

$('select[name="town"] option[disabled]:selected').val();

Thanks to this SO answer.

Studocwho
  • 2,404
  • 3
  • 23
  • 29
  • Thanks for the first part of your answer, although the docs you citate do not address the case I'm asking for. "Would be expected" is not secure enough for me, as well as some testing on some browsers is not either. I'm looking for documentation showing me that this behaviour is effectively the expected one, and will be on any browser. As for the second part, I wasn't really asking how to test against null ;-) – fpierrat Dec 17 '18 at 22:25
  • While I can't find any docs on the expected behaviour, I did stumble on an [SO question](https://stackoverflow.com/questions/43632768/val-of-select-null-if-values-is-disabled) to get the disabled option value... `$('select[name="town"] option[disabled]:selected').val();` This would be more fitting to what you wanted. – Studocwho Dec 17 '18 at 22:55
  • a little more fitting maybe... but still I just want to be sure _what's the expected behaviour of_ `$('select').val()`. The best answer so far is Heretic Monkey's comment, citating a report where it seems to be stated that it _does_ return null since JQuery 1.8.3. I'd rather base my choice on an officially documented behaviour though. – fpierrat Dec 18 '18 at 10:23