替代IE的innerHTML的選擇框

Question

我有一個問題，就是php數據未顯示在選擇框中。 innerhtml在Internet Explorer中不起作用。 long_description_detail_list數據未顯示在選擇框中。請幫助我

第一頁：

<div id="long_description_detail_list" style="display:none;">
    <option value="0">Select..</option>
    <?php
    include_once('Model/Language.php');
    $r = new Language();
    $a = $r->Select();
    for($i = 0; $i < count($a); $i++)
    {
        print '<option value="'.$a[$i][0].'">'.$a[$i][1].'</option>';
    }
    ?>
</div>



<script language="javascript" type="text/javascript">

    //Browser Support Code
function create_long_description_detail_div(){
    if(count_table_long_description_detail() >=3) {
        alert("You can not add more than 3 long_description Details");
    }
    else {
        var ajaxRequest;  // The variable that makes Ajax possible!

        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){

                var blank_long_description_detail = ajaxRequest.responseText;
                document.getElementById('long_description_detail_counter').value ++;
                $('#my-all-long_description_details-here').append(blank_long_description_detail);
                set_new_height_of_step_2('inc');
                var long_description_list_counter = document.getElementById('long_description_detail_counter').value;
                var long_description_detail_list = document.getElementById('long_description_detail_list').innerHTML;
                document.getElementById('llanguage[' + long_description_list_counter + ']').innerHTML = long_description_detail_list;
            }
        }
        var long_description_detail_counter = document.getElementById('long_description_detail_counter').value;

        var queryString = "?long_description_detail_counter=" + long_description_detail_counter;
        ajaxRequest.open("GET", "Views/User/long_description/add_long_descriptions_detail.php" + queryString, true);
        ajaxRequest.send(null);
    }
}


</script>

名為add_long_descriptions_detail.php的第二頁中未在此處顯示數據：

<select id="llanguage[<?php echo $counter; ?>]" name="llanguage[<?php echo $counter; ?>]" class="txtBox">
                            <option value="0">Select..</option>

                            </select>

Answer 1

IE不支持使用innerHTML更新<select>的元素，但是您可以使用DOM，這始終是正確的處理方式。

使您的服務器端腳本返回選項的JSON數組； 它將使一切變得容易得多。

ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState === 4) {
        // Parse the response
        var options = eval('(' + ajaxRequest.responseText + ')');

        // Get the box; I have no clue what this is
        var box = document.getElementById('llanguage[' + long_description_list_counter + ']');

        // Clear any current elements
        while(box.childNodes.length > 0) {
            box.removeChild(box.firstChild);
        }

        // Add new ones
        for(var i = 0; i < options.length; i++) {
            var newOption = document.createElement('option');
            newOption.value = options[i].value;
            newOption.appendChild(document.createTextNode(options[i].text));
        }
    }
};

（這是對原始代碼的精簡，但是我敢肯定您可以將其放入。）

使用兼容舊IE的JSON解析器而不是eval也是一個好主意。

JSON應該如下所示：

[
    { "text": "Some text", "value": "some-value" }
]

您可以使用json_encode從PHP數組方便地生成它。