One use case is in jQuery:

 $select.append('<option value="">All</option>');

It looks like it actually adds the element in HTML:

<option value>All</option>

Instead, what I want is to append to the element so that it gives an empty string to value:

<option value="">All</option>

Why doesn't that happen?

One use case is in jQuery:

 $select.append('<option value="">All</option>');

It looks like it actually adds the element in HTML:

<option value>All</option>

Instead, what I want is to append to the element so that it gives an empty string to value:

<option value="">All</option>

Why doesn't that happen?

• javascript
• jquery
• html

• 5 What makes you think there's a difference between value="" and value? They both represent no value being set. – Sam Hanley Commented Jan 23, 2015 at 19:42
• It's a behavior from the browser, no need to output empty properties – Hacketo Commented Jan 23, 2015 at 19:43
• 1 And to expand on what @sphanley wrote, an elements value is always a string, and no value being set will always return an empty string. – adeneo Commented Jan 23, 2015 at 19:45
• @sphanley even if the ="" is in the source code – Hacketo Commented Jan 23, 2015 at 19:48

3 Answers 3

It actually add the element in HTML

No, it doesn't.

It adds the element to the DOM, not to the HTML.

When you look at the DOM, using your browser's developer tools, it will displayed using HTML-like syntax. In this syntax, a value attribute where the value is an empty string will be rendered without the ="" portion. (It is looking like that part of the syntax is actually valid HTML, but I haven't found the part in the spec which allows it.)

If you were (to use Chrome as an example), you could right click on its parent element and pick "Edit as HTML" at which point you would see the ="" again.

If you were to submit the form containing the select element you would see that the data sent would be: select_name=. This shows that the value was correctly set to an empty string. If it had not worked you would have got select_name=All since the element's text is used as the value if no value is set.

Your question seems to indicate a degree of confusion as to the meaning of the syntax in question. Based on the fact that the occurrence of value in your tag lacks a ="", you're inferring that this represents an HTML "value" element - that's not the case. What's actually happening here has to do with the fact that there's multiple ways in which the value of an HTML attribute can be represented. Let's explore those formats, to better understand what you're seeing.

Valid formats for HTML Attributes

The most mon way you'd represent, say, a value attribute would be with quotes, as follows:

value="something"

However, if you look at the section of the HTML5 spec regarding attributes, it's actually also valid to represent attribute values in four different ways:

• empty attribute syntax

• unquoted attribute-value syntax

• single-quoted attribute-value syntax

• double-quoted attribute-value syntax

The format that specifically speaks to your case is "empty attribute syntax". Reading further, the spec describes the Empty Attribute syntax as follows:

Just the attribute name. The value is implicitly the empty string.

There's also a slightly more detailed explanation on the historical HTML 5 reference for attributes:

Certain attributes may be specified by providing just the attribute name, with no value.

In the following example, the disabled attribute is given with the empty attribute syntax:

<input disabled>

Note that empty syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.

<input disabled="">

As you're seeing, this means that for an HTML element, when representing a property with no value, the ="" is optional. As such, some browsers will just display the property without that unnecessary markup. Whether the property is rendered as value or value="", any standards pliant browser will know that value is a property which holds a string, so it will therefore always return either that property's contents, if any, or at minimum an empty string in absence of explicit contents.

 $select.append($('<option>', { value: "", text: "All" }));