Solve the option insertion BUG (compatible with IE, FF, Opera, Chrome, Safari) of the select label innerHTML in IE _ javascript skills

Source: Internet
Author: User
Tags string tags
If you use innerHTML to insert the option under ie, ie will remove & lt; option & gt; and split it into multiple nodes. This will cause an error in the select statement:
This is an old bug and now provides a perfect solution. Because I have been using createElement to create dynamic options and add them, I have never encountered this problem. However, each person has a different coding style, and some people like to write string tags and insert them with innerHTML, this is not a problem. To help people of different encoding styles, I encapsulated a method to solve the ie bug and be compatible with five browsers, in this way, you can use one method to implement different styles for easy maintenance and management.

Bug description:
If you use innerHTML to insert the option under ie, ie will remove the previous And split it into multiple nodes. This will lead to an error in the select statement. It is not inserted but a problem occurs during the conversion of nodes. Microsoft also describes this bug, two solutions are provided. You can search for them by yourself. I will outline the two solutions provided by Microsoft.
1. createElement is used. This is a regular channel and there is a problem with errors.
2. Insert the complete select string to p.

Implementation:
Principle:
Now that you are using innerHTML, you must want to use a string to insert the option. Here we mainly solve this problem. Of course, you can also pass in the createElement object to insert the option.
The input parameters are judged to be elementObj or a string. If elementObj is used, the standard add method is used for compatibility processing. If it is a string, use p to wrap the complete select statement and convert it to a dom object and use appendChild to add it.

Note:
B $. type. isElement (arg) is the method used in bBank to determine whether the object is an element.
B $. browser. isIE () is the method used in bBank to determine whether it is ie.
B $. parseDom (str) is a method used in bBank to convert strings into standard dom. I have explained this in my previous blog.
BBank framework: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html

The Code is as follows:


Var sltObj = document. getElementById ('xx'); // obtain the select object. Here is just an example, which can be obtained according to your habits.
Function addOption (obj, arg ){
If (B $. type. isElement (arg )){
If (B $. browser. isIE () obj. add (arg );
Else obj. add (arg, null );
Return;
}
Var str =''+ Arg +'';
Var slt = B $. parseDom (str) [0];
For (var I = 0, num = slt. length; I <num; I ++ ){
Obj. appendChild (slt [0]);
}
};


Usage:

The Code is as follows:


AddOption (sltObj ,'A');



END
This is the end. Here we recommend a self-written js framework. The above method is integrated into the framework.
Use: B $ ('obj '). addOption (arg );
Related Article

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.