Select will get an empty string when the Option element in IE6/7/8 does not set a value_javascript tips

As follows

Copy the code The code is as follows:

< html>



one
two
< ;option>three

When the change event is triggered, the test results in each browser are as follows:

IE6/7/8
: An empty string pops upIE9/Firefox/Safari/Chrome/ Opera
: Pops up the innerText value of the corresponding option element. Obviously, the IE9/Firefox/Safari/Chrome/Opera implementation makes sense. That is, when the value of option is the same as the innerText of option, the value can be omitted and not written. This is more concise. Unfortunately, IE6/7/8 does not support writing this way. To ensure compatibility with all browsers, be sure not to omit the value attribute when writing options.

Slightly modify the above html code

Copy the code The code is as follows:

one
two
three

Adds the value attribute to the first option. At this time, the test steps are as follows

1, select two
2, select one

and the results that pop up twice are as follows:

IE6/7/8
: [null character String, 1]IE9/Firefox/Safari/Chrome/Opera
: [two,1]From the results, it can be seen 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.
In IE9/Firefox/Safari/Chrome/Opera, the value of option is first taken. If there is no value attribute, the innerText value of option is taken.

Modify the code again

Copy the code The code is as follows:

< select onchange="alert(this.value.length)">

one
two
< ;option>three

Compared with the previous step, spaces are added on both sides of the two in the second option. This time we alert the length of value. Choose two. At this time, the following results pop up in each browser:

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

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

It has been mentioned above that the innerText of option is returned, but it is not innerHTML. Then modify the code

Copy the code The code is as follows:

one
two
< ;option>three

The second option has no value attribute and is a span element inside. At this time, choose two. What pops up in IE9/Firefox/Safari/Chrome/Opera is still "two" instead of "two". If you alert the length, you will find that it is still 3, not the length of "two", which is 16.