Internet Explorer 中的 InnerHtml 問題

Question

我在 IE 上應用 ajax 時遇到問題。我在 select 標簽上應用 innerHtml 但它不起作用我的 ajax 代碼是

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.getElementById('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);
}

我用於創建選項的 php 代碼是。我正在獲取文件類型中的值，並且在其他瀏覽器上運行良好

$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;  

此代碼的我的 html 是

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

我在許多論壇上搜索過這個錯誤。他們都說帶有 select 的 innerHtml 在 IE 中有錯誤，誰能幫我解決這個問題。我可以填充我的 select 選項。 提前致謝

Answer 1

幾年前，我在 IE6 上遇到過類似的問題。 如果我沒記錯的話，我通過替換整個選擇元素而不是僅僅替換innerHTML（選項元素）來解決這個問題。

為此，您還必須將通過 ajax 調用的文件更改為 output 選擇元素的開始和結束標記。 將您的 html 站點上的 select-elemet 放入具有 id 的另一個元素（如果還沒有您尚未發布的元素）並替換該外部元素的 innerHTML。

編輯：發布的鏈接gnur准確地描述了這種解決方法，所以我好像沒記錯；）

Answer 2

這個頁面有一個很好的解決方法：

Answer 3

不喜歡他們希望您刪除 select 並將其添加回來的解決方案。 殺死所有的事件處理程序。 寫了一點 function 來嘗試設置 innerHTML。 如果設置 innerHTML 導致沒有添加任何選項，它會重寫 function 以便創建一個元素並克隆它的選項。

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);
    }
}

運行示例

Answer 4

這可能對您在 IE 和 FF 中有效，當然，根據您希望在 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);
        }
    }