Preface:
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 removes the <option> option and splits it into multiple nodes. This will cause a select error, instead of being inserted, but there was a problem during node conversion. Microsoft also described the bug and provided two solutions. You can search for them by yourself. I will outline two solutions of Microsoft.
1. createElement is used. This is a regular channel and there is a problem with errors.
2. Insert the complete select string to the div.
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 div 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
Copy codeThe 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 = '<select>' + arg + '</select> ';
Var slt = B $. parseDom (str) [0];
For (var I = 0, num = slt. length; I <num; I ++ ){
Obj. appendChild (slt [0]);
}
};
Usage:
Copy codeThe Code is as follows:
AddOption (sltObj, '<option> a </option> ');
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 );