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

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.