Select will get an empty string when the Option element is not set in IE6/7/8

as follows

Copy the codeThe code is as follows:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Select will get an empty string when the Option element in IE6/7/8 is not set to a value</title>
</head> 
<body> 
<select onchange="alert()"> 
<option>one</option> 
<option>two</option> 
<option>three</option> 
</select> 
</body> 
</html> 

When the change event is triggered, the test results in each browser are as follows:
IE6/7/8: Empty string pops up
IE9/Firefox/Safari/Chrome/Opera: The innerText value of the corresponding option element pops up.

It is obvious that the implementation of IE9/Firefox/Safari/Chrome/Opera makes some sense. That is, when the value of option and the innerText of option are the same, its value can be omitted and not written. This is simpler. Unfortunately, IE6/7/8 does not support writing like this. To ensure compatibility with all browsers, be sure to avoid missing the value attribute when writing option.

Modify the above html code slightly

Copy the codeThe code is as follows:

 
<select onchange="alert()"> 
<option value="1">one</option> 
<option>two</option> 
<option>three</option> 
</select> 

Added a value attribute to the first option. The test steps are as follows
1. Select two
2. Choose one

The results of the two pop-ups are as follows:
IE6/7/8: [Empty string, 1]
IE9/Firefox/Safari/Chrome/Opera : [two,1]

From the results, we can see that the implementation of each browser is roughly as follows:

In IE6/7/8, if option has no value, an empty string will be returned.
First take the value of the option in IE9/Firefox/Safari/Chrome/Opera. If there is no value attribute, take the innerText value of the option.

Modify the code again

Copy the codeThe code is as follows:

 
<select onchange="alert()"> 
<option value="1">one</option> 
<option> two </option> 
<option>three</option> 
</select> 

Compared with the previous step, spaces are added on both sides of the second option. This time we alert the length of the value. Select two. At this time, the results pop up in each browser are as follows
IE6/7/8 : 0
IE9/Firefox/Safari/Chrome/Opera : 3

In IE6/7/8, an empty string is returned for an option without a value attribute, and its length is naturally 0. This test focuses mainly on modern browsers such as IE9/Firefox/Safari/Chrome/Opera. All of them return 3 but not 5. You can see that the whitespace symbols on both sides of two are removed (trim).

The previous test has mentioned that the value of the option is first taken in IE9/Firefox/Safari/Chrome/Opera, and the value attribute does not take the innerText value of the option. For options that do not set the value property, they try to return their innerText as a value, and even automatically remove the whitespace on both sides.

The above mentioned the innerText that returns option, but it is not innerHTML. Modify the code again

Copy the codeThe code is as follows:

 
<select onchange="alert()"> 
<option value="1">one</option> 
<option><span>two</span></option> 
<option>three</option> 
</select> 

The second option has no value attribute, and it is a span element. Choose two at this time. What pops up in IE9/Firefox/Safari/Chrome/Opera is still "two", not "<span>two</span>". If alert out its length, it will be found that it is still 3, instead of the length of "<span>two</span>" 16.

You can see that when you forget to write the option value, these modern browsers will try to return the correct result value (that the client programmer wants) as much as possible, and their fault tolerance is better than that of IE6/7/8.

Related:
The performance differences of option elements in each browser