替代IE的innerHTML的选择框

Question

I have a problem that is php data not showing in select box. innerhtml not working in Internet Explorer. long_description_detail_list data not showing in select box.please help me

first page:

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

data not showing here in second page named 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 doesn't support updating the elements of a <select> with innerHTML , but what you can do is use the DOM, which is always the right way to go about things anyways.

Make your server-side script return a JSON array of options; it'll make everything a lot easier.

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

(This is a little trimmed-down from your original code, but I'm sure you can fit it in.)

It's also probably a good idea to use an old-IE-compatible JSON parser instead of eval .

The JSON should look like this:

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

You can use json_encode to produce it conveniently from a PHP array.