Solution IE Select tag innerhtml insert option Bug (compatible Ie,ff,opera,chrome,safari) _javascript tips

Source: Internet
Author: User
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 of tags and innerhtml insert, this is not a problem, In order to facilitate people with different coding styles, I encapsulate a method for solving IE's bug and compatibility with 5 big browsers, so that everyone can use a method to achieve different styles, easy maintenance and management.

Bug Description:
Using innerHTML below IE to insert option options, IE will remove the front <option&gt, and split into multiple nodes, which will cause a select error, not not inserted, but the node in the conversion problem, Microsoft has a description of the bug , and provides two solutions, you can search for their own, I would like to mention Microsoft's two programs.
1, the use of createelement, this is a regular channel, to make a mistake there is really a problem.
2, insert the full select string into the div.

Realize:
Principle:
Since it is the person who uses innerHTML, you must want to insert option with a string, this is mainly to solve this person's population, of course, you can also pass the CreateElement object to insert.
For the incoming parameter will make a judgment, see is Elementobj or string, if it is elementobj then use the standard Add method to join, and do compatibility processing. If it is a string, use div to wrap the full select and convert it into a DOM object to join with AppendChild.

Attention:
B$.type.iselement (Arg) is a method within Bbank to determine whether an object is an element
B$.browser.isie () is the bbank inside to determine whether IE is the way
B$.parsedom (str) is a way to convert a string into a standard DOM in Bbank, which is specifically explained in my previous blog
Bbank Framework Introduction: http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html
Copy Code code as follows:

var Sltobj=document.getelementbyid (' xx ')//Get Select object, here just give an example, you can get by your own custom
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 Code code as follows:

AddOption (sltobj, ' <option>a</option> ');


End
Here is the end, here to recommend a my own written JS framework, the above method is integrated in the framework of the
Use: b$ (' obj '). AddOption (ARG);

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.