Solve the bug of inserting option in select tag innerHTML under IE (compatible with IE, FF, Opera, Chrome, Safari)_javascript skills

Foreword:
This is an old bug, now a perfect solution is provided. Since I have always used createElement to create and add dynamic options, I have never encountered this problem. However, everyone has different coding styles. Some people like to write tags in the form of strings and insert them using innerHTML. Isn’t this a problem? In order to facilitate people with different coding styles, I have encapsulated a method to solve this bug in IE and be compatible with the five major browsers, so that everyone can use one method to implement different styles, which facilitates maintenance and management.

Bug description:
If you use innerHTML to insert the option option under IE, IE will remove the previous and split it into multiple nodes. This will cause select errors, not without it. Insert it in, but there is a problem with the node during conversion. Microsoft has also described this bug and provided two solutions. You can search for it yourself. I will probably mention two solutions from Microsoft.
1. Use createElement. This is a formal channel. There are real problems if something goes wrong.
2. Insert the complete select string into the div.

Implementation:
Principle:
Since you are using innerHTML, you definitely want to use strings to insert options. The main purpose here is to solve this problem. Of course, you can also pass in the createElement object. to insert.
A judgment will be made on the incoming parameter to see if it is elementObj or a string. If it is elementObj, then use the standard add method to add it and perform compatibility processing. If it is a string, use div to wrap the complete select and convert it into a dom object and add it with appendChild.

Note:
b$.type.isElement(arg) is the method used in bBank to determine whether an object is an element
b$.browser.isIE() is used in bBank to determine Is it the IE method?
b$.parseDom(str) is the method used in bBank to convert strings into standard dom. It is specifically explained in my previous blog
bBank framework introduction: http://www .cnblogs.com/bruceli/archive/2010/04/15/bBank.html

Copy code The code is as follows:

　var sltObj=document.getElementById('xx');//Get the select object, here is just an example, you can get it according to your own 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]);
}
};

Use :

Copy code The code is as follows:

　addOption(sltObj, 'a< /option>');

END
That’s it. I recommend a js framework I wrote myself. The above method is integrated into the framework.
Use: b$('obj').addOption(arg);