When the Option element in IE6/7/8 has no value, Select will obtain the Null String _ javascript technique.

We can see that when you forget to write the option value, these modern browsers will try to return the correct (the client programmer wants) result value, and its fault tolerance is better than IE678. As follows:

The Code is as follows:

If the Option element in IE6/7/8 has no value, Select returns an empty string.


One Two Three

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

Obviously, the implementation of IE9/Firefox/Safari/Chrome/Opera is reasonable. That is, when the value of option is the same as the innerText of option, its value can be omitted and not written. This is more concise. Unfortunately, IE6/7/8 does not support this write. To ensure compatibility with all browsers, the value Attribute must not be missing during option writing.

Slightly modify the preceding html code

The Code is as follows:

One Two Three

Added the value attribute to the first option. The test procedure is as follows:
1. Select two
2. Select one

The two pop-up results are as follows:
IE6/7/8: [Null String, 1]
IE9/Firefox/Safari/Chrome/Opera: [Two, 1]

From the result, we can see that the implementation of various browsers is roughly as follows:

In IE6/7/8, if option does not have a value, an empty string is returned.
IE9/Firefox/Safari/Chrome/Opera first obtains the value of option. If the value attribute is not available, the innerText value of option is used.

Modify the code.

The Code is as follows:

One Two Three

Compared with the previous step, spaces are added on both sides of two of the second option. This time, alert calculates the length of the value. Select two. The pop-up results in various browsers 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 the value attribute. Its length is naturally 0. This test focuses on modern browsers such as IE9, Firefox, Safari, Chrome, and Opera. 3 is returned but not 5. We can see that the blank spaces on both sides of two are removed from these browsers (trim ).

In the previous test, we mentioned that the option value is first obtained in IE9/Firefox/Safari/Chrome/Opera, and the option innerText value is not obtained in the value attribute. For options without setting the value attribute, they try to return their innerText as the value, and even automatically remove the blank characters on both sides.

As mentioned above, the innerText returned by option is not innerHTML. Modify the code.

The Code is as follows:

One Two Three

The second option does not have the value attribute, which is a span element. Select two. In IE9/Firefox/Safari/Chrome/Opera, "two" instead of "two" is displayed ". If alert returns its length, it will find that it is still 3, rather than the length of "two" 16.

We can see that these modern browsers will try to return the correct result value when they forget to write the option value. The fault tolerance of these modern browsers is better than that of IE6/7/8.

Related:
Performance differences of option elements in various browsers