Internet Explorer不会在选择框中加载值

Question

Somehow IE does not load the values in my select boxes that I update with Ajax but other browsers do.

HTML:

<form id="auto_form" action="index.php?page=confirm_user" method="post">
    Year: 
        <select id="auto_year" name="auto_year">
            <option>Select option..</option>
%year%
        </select>
                    <br />
    <span id="auto_brand_title" style="display:none;">Brand:</span>
        <select id="auto_brand" style="display:none;" name="auto_brand" onchange="">
        </select>
                    <br />
    <span id="auto_model_title" style="display:none;">Model: </span>
        <select id="auto_model" style="display:none;" name="auto_model">
        </select>
                    <br />
            <!--Start extra choices-->
            <span id="auto_bodywork_title" style="display:none;">Bodywork: </span>
                <select id="auto_bodywork" style="display:none;" name="auto_bodywork">
                </select>
                            <br />
            <span id="auto_doors_title" style="display:none;">Doors: </span>
                <select id="auto_doors" style="display:none;" name="auto_doors">
                </select>
                            <br />
            <span id="auto_fuel_title" style="display:none;">Fuel: </span>
                <select id="auto_fuel" style="display:none;" name="auto_fuel">
                </select>
                            <br />
            <span id="auto_gearbox_title" style="display:none;">Gear Box: </span>
                <select id="auto_gearbox" style="display:none;" name="auto_gearbox">
                </select>
            <!--End extra choices-->
                    <br />
    <span id="auto_type_title" style="display:none;">Type: </span>
        <select id="auto_type" style="display:none;" name="auto_type">
        </select>
                    <br />
    <span id="auto_uitvoering_title" style="display:none;">Uitvoering: </span>
        <select id="auto_uitvoering" style="display:none;" name="auto_uitvoering">
        </select>

jQuery:

    $("#auto_year").change(function(){
       updateField(this.value, 'auto_brand', 1, 2, this.parentNode.id), resetBelow(0,'auto'), show('auto_brand');
    });

    $("#auto_brand").change(function(){
       updateField(this.value, 'auto_model', 2, 3, this.parentNode.id), resetBelow(1,'auto'), show('auto_model');
    });

    $("#auto_model").change(function(){
       updateField(this.value, 'auto_bodywork', 3, 4, this.parentNode.id), resetBelow(2,'auto'), show('auto_bodywork');
    });

    $("#auto_bodywork").change(function(){
       updateField(this.value, 'auto_doors', 4, 5, this.parentNode.id), resetBelow(3,'auto'), show('auto_doors');
    });

    $("#auto_doors").change(function(){
       updateField(this.value, 'auto_fuel', 5, 6, this.parentNode.id), resetBelow(4,'auto'), show('auto_fuel');
    });

    $("#auto_fuel").change(function(){
       updateField(this.value, 'auto_gearbox', 6, 7, this.parentNode.id), resetBelow(5,'auto'), show('auto_gearbox');
    });

    $("#auto_gearbox").change(function(){
       updateField(this.value, 'auto_type', 7, 8, this.parentNode.id), resetBelow(6,'auto'), show('auto_type');
    });

    $("#auto_type").change(function(){
       updateField(this.value, 'auto_uitvoering', 8, 9, this.parentNode.id), resetBelow(7,'auto'), show('auto_uitvoering');
    });

    $("#auto_uitvoering").change(function(){
       updateField(this.value, '', 9, 10, this.parentNode.id), resetBelow(8,'auto');
    });

Ajax Function:

function updateField(str, id, prevvalue, value, vehicletype)
{
if (str=="")
  {
  document.getElementById(id).innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(id).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","inc/form_rest.php?q="+str+"&prevvalue="+prevvalue+"&value="+value+"&vehicletype="+vehicletype,true);
xmlhttp.send();
}

Answer 1

In your .change() calls, try using $(this).val() instead of this.value. In ie, events get called on the window object instead of the actual element itself, which affects the scope of 'this'. $(this) should normalize this for you, and since its a jQuery object now, you'll have to use jQuery functions instead of native js properties, therefore the need for .val().

Also, I'd highly recommend using $.ajax() instead of trying to handle cross browser calls yourself. Half the point of using jQuery is to beat cross browser nightmares. If you are going to load it on your page, go ahead and make all your scripting jQuery.