javascript - Internet Explorer 不加载选择框中的值

Question

不知何故，IE 不会加载我使用 Ajax 更新的选择框中的值，但其他浏览器会加载。

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

在 .change() 调用中，尝试使用 $(this).val() 而不是 this.value。在 ie 中，事件是在窗口对象上调用的，而不是在实际元素本身上调用的，这会影响“this”的范围。 $(this) 应该为您标准化它，并且由于它现在是一个 jQuery 对象，您必须使用 jQuery 函数而不是 native js 属性，因此需要 .val()。

此外，我强烈建议使用 $.ajax() 而不是尝试自己处理跨浏览器调用。使用 jQuery 的一半目的是为了克服跨浏览器的噩梦。如果您要将其加载到页面上，请继续将所有脚本编写为 jQuery。