Resolves a bug in which the Select Tag innerHTML option is inserted under IE (compatible

Source: Internet
Author: User

If you use innerHTML to insert option under IE, IE will remove the previous <option&gt, 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

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.