InnerHtml problem in Internet Explorer

I am having problem with applying ajax on IE.I am applying innerHtml on select tag but it is not working my ajax code is

function AjaxF(ftype, cid) {

    var httpxml;
    try {
        // Firefox, Opera 8.0+, Safari
        httpxml = new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            httpxml = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                httpxml = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    function stateck() {
        if (httpxml.readyState == 4) {

            var myarray = httpxml.responseText;
            if (ftype == 'Files') {
                document.getElementById('temp_thumbnail').innerHTML = myarray;
                document.getElementById('temp_mainfiles').innerHTML = myarray;
                document.getElementById('temp_preview').innerHTML = myarray;
                document.getElementById('temp_image').innerHTML = myarray;
            }
            else {
                document.get开发者_运维百科ElementById('temp_thumbnail').innerHTML = myarray;
                document.getElementById('temp_main').innerHTML = myarray;
                document.getElementById('temp_image').innerHTML = myarray;
            }


        }
    }
    var url = "ajax/files_ajax.php";
    url = url + "?filetype=" + ftype + "&customerid=" + cid;
    url = url + "&sid=" + Math.random();
    httpxml.onreadystatechange = stateck;
    httpxml.open("GET", url, true);
    httpxml.send(null);
}

My php code for creating option is.I am getting the values in filetype and it is working fine on other browsers

$sql="select name ,id from temporary_upload where type ='$filetype' AND customer_id='$customer_id'";
$result=mysql_query($sql);

while($rows=mysql_fetch_array($result))
{
    $s.="<option id='' name='' selected='selected' value='". $rows['name']  ."'>".  $rows['name'] ."</option>";
}

echo $s;  

My html for this code is

<select id="temp_thumbnail" name="temp_thumbnail" style="width:452px">
     <option></option>
</select>

I have searched for this error on many forums.They all are saying that innerHtml with select has error in IE can anyone help me to resolve this issue.That I can populate my select option. Thanks in advance

---

some years ago, i had a similar problem with IE6. if i remember right, i solved this by replacing the whole select-element instead of just replacing the innerHTML (the option-elements).

to do this, you'll have to change the file called via ajax to output the start- and end-tag of your select-element, too. put the select-elemet on your html-site into another element with an id (if there isn't already one you havn't posted) and replace the innerHTML of that outer element.

EDIT: the link gnur posted describes exactly this workaround, so it seems like i remember right ;)

---

Not a fan of the solutions where they want you to remove the select and than add it back. Kills all the event handlers. Wrote a little function that tries to set the innerHTML. If setting the innerHTML results in no options being added, it rewrites the function so it will create an element and clone its options.

function addOptionsToSelect( selectId, optStr){
    var sel = document.getElementById(selectId)
    sel.options.length = 0;
    sel.innerHTML = optStr;
    if(sel.options.length===0){
        (addOptionsToSelect = function( selectId, optStr){ 
            var div = document.createElement("div");
            div.innerHTML = "<select>" + optStr + "</select>";
            var newSelect = div.getElementsByTagName("select")[0];
            var sel = document.getElementById(selectId);
            sel.options.length = 0;                 
            for(var i=0;i<newSelect.options.length;i++){
                var cpy = newSelect.options[i].cloneNode(true);
                sel.appendChild(cpy);
            }
            div = newSelect = sel = null;
        })
        ( selectId, optStr);
    }
}

Running Example

---

This may work for you in IE and FF, of course a bit of modification depending on how and where you want to place the new options in the select ...

    function addmore(){
        var select=document.getElementById('myselect');
        var theindex=select.options[select.selectedIndex];
        var option=document.createElement('option');
        option.text='text_4';
        option.value='value_4';
        try{
            select.add(option,theindex);
        }
        catch(e){
            //and for ie
            select.add(option,select.selectedIndex);
        }
    }

---

This page has an excellent work around: