If you use innerHTML to insert option under IE, IE will remove the previous <option>, and split it into multiple nodes, which will cause a select error
Objective:
This is an old bug and now offers a perfect solution. Since I have been using createelement to create dynamic option and add, so I have not encountered this problem, but everyone write code style is different, some people like to write a string form of the label and innerHTML Insert, this is not a problem, In order to facilitate the different coding style of people, I encapsulated a method to solve the IE bug and compatible with 5 large browsers, so that everyone can use a method to achieve different styles, easy maintenance management.
Bug Description:
Under IE use innerHTML to insert option option, IE will remove the front <option>, and split into multiple nodes, this will cause the select error, not to plug in, but the node in the conversion problem, Microsoft to this bug also has a description , and provide two solutions, you can search for yourself, I probably mention Microsoft's two programs.
1, using createelement, this is the formal channel, to make mistakes there is really a problem.
2, insert the full select string into the div.
Realize:
Principle:
Since the person who uses innerhtml, must want to use the string to insert option, here is mainly to solve this person crowd, of course you can also pass in CreateElement object to insert.
For incoming parameters will make a judgment, see whether it is elementobj or string, if it is elementobj then use the standard Add method to join, and do compatible processing. If it is a string, use the div to wrap the complete select and convert it to a DOM object with AppendChild.
Attention:
B$.type.iselement (Arg) is the method used to determine whether an object is an element in Bbank
B$.browser.isie () is a method used in Bbank to determine whether IE is
B$.parsedom (str) is a method used in Bbank to convert a string into a standard DOM, which is explained in my previous blog.
Bbank Framework Description: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
Copy CodeThe code is as follows:
var Sltobj=document.getelementbyid (' xx ');//Get Select object, here is just an example, can be used to get the
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]);
}
};
Use:
Copy CodeThe code is as follows:
AddOption (sltobj, ' <option>a</option> ');
END
Here is the end, here to recommend a I write my own JS framework, the above method is integrated in the framework
Used: b$ (' obj '). AddOption (ARG);
Resolves a bug in which the Select Tag innerHTML option is inserted under IE (compatible