search

Home >Web Front-end >JS Tutorial >Select will get an empty string when the Option element in IE6/7/8 does not set a value_javascript tips

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

WBOY
WBOYOriginal
2016-05-16 18:08:081024browse

As follows

Copy the code The code is as follows:


< html>

When the Option element in IE6/7/8 does not have a value, Select will get an empty string





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:



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)">


< ;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:



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.

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

Related:

Differences in the performance of option elements in various browsers
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery name conflict solution_javascript tipsNext article：jQuery name conflict solution_javascript tips

Related articles

See more