IE选择框的innerHTML替代方案

时间:2013-09-08 20:12:49

标签: php javascript ajax internet-explorer

我遇到的问题是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>

1 个答案:

答案 0 :(得分:0)

IE不支持使用<select>更新innerHTML的元素,但您可以使用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数组中方便地生成它。