Why 'innerhtml' does not work properly for 'select' tag

Question

I am trying to set the innerhtml of an html select tag but I cannot set this feature;therefor,I need to use the outerhtml feature.This way,not only is my code HARDCODE ,but also it is preposterous.I have already read 'InnerHTML IE 8 doesn't work properly? Resetting form',it did not help though.

I would really appreciate it if you tell me how to set the innerhtml feature of an html select tag. My C# code:

public void SetDefaultValue(string ControlID, string ControlValue) 
{      
    System.Windows.Forms.HtmlDocument doc = webBrowser1.Document;
    HtmlElement HTMLControl = doc.GetElementById(ControlID);
        string ListResult;            
        string ListInnerHTML = "";
        ListInnerHTML += "<OPTION value = " + LstString + ">" + LstString + "</OPTION>";                                      
        ListResult = "<SELECT id = " + '"' + HTMLControl.Id + '"' + " type = " + '"' + HTMLControl.GetAttribute("type") + '"' + " title = " + '"' +
            HTMLControl.GetAttribute("title") + '"' + " name = " + '"' + HTMLControl.Name + '"' + " value = " + '"' + HTMLControl.GetAttribute("value") +
            '"' + " size = \"" + HTMLControl.GetAttribute("size") + '"' + HTMLControl.GetAttribute("multiple").ToString() + "\">" + ListInnerHTML + "</SELECT>";
        HTMLControl.OuterHtml = ListResult;                    
}

or

string _lsthtml = _htmlel.OuterHtml;
string[] _parts = ControlValue.Split(new char[] { ',' });
string _lstinner = "";
foreach (string _lst in _parts)
_lstinner += "<option value=" + _lst + ">" + _lst + "</option>";

_lsthtml = _lsthtml.Insert(_lsthtml.IndexOf(">") + 1, _lstinner);
_htmlel.OuterHtml = _lsthtml;

This code works but I need something efficient and clean. The ReturnControlType function returns the type of an html tag.

Answer 1

This is an official Internet Explorer bug:

BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object.

One workaround

You may try adding one of the following meta tags in your document's head:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

or

<meta http-equiv="X-UA-Compatible" content="IE=10" />

You should also properly format the option tag's value attribute (enclose LstString in '):

ListInnerHTML += "<OPTION value='" + LstString + "'>" + LstString + "</OPTION>";

A more reliable solution

As the fixes above might be a workaround for your code, I would suggest to use a more reliable approach. Consider adding a reference to Microsoft.mshtml to your project and modifying your method like this:

// add this to the top of the file containing your class
using mshtml;

public void SetDefaultValue(string ControlID, string ControlValue)
{
    System.Windows.Forms.HtmlDocument doc = webBrowser1.Document;
    IHTMLDocument2 document = doc.DomDocument as IHTMLDocument2;
    var sel = doc.GetElementById(ControlID);
    HTMLSelectElement domSelect = (HTMLSelectElement)sel.DomElement;
    domSelect.options.length = 0;
    HTMLOptionElement option;

    // here you can dynamically add the options to the select element
    for (int i = 0; i < 10; i++)
    {
        option = (HTMLOptionElement)document.createElement("option");
        option.text = String.Format("text{0}", i);
        option.value = String.Format("value{0}", i);
        domSelect.options.add(option, 0);
    }
}