Home > Developer > JavaScript
As follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Title> if Option element in IE6/7/8 is not set to value, Select returns an empty string. </title>
</Head>
<Body>
<Select onchange = "alert (this. value)">
<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: 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
Copy codeThe Code is as follows:
<Select onchange = "alert (this. value)">
<Option value = "1"> one </option>
<Option> two </option>
<Option> three </option>
</Select>
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.
Copy codeThe Code is as follows:
<Select onchange = "alert (this. value. length)">
<Option value = "1"> one </option>
<Option> two </option>
<Option> three </option>
</Select>
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.
Copy codeThe Code is as follows:
<Select onchange = "alert (this. value)">
<Option value = "1"> one </option>
<Option> <span> two </span> </option>
<Option> three </option>
</Select>
The second option does not have the value attribute, which is a span element. Select two. In IE9/Firefox/Safari/Chrome/Opera, "two" is displayed instead of "<span> two </span> ". If alert returns its length, it will find that it is still 3, rather than 16 of the length of "<span> two </span>.
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
