Ajax 填充下拉菜单在 IE 中不起作用答案

【问题标题】：Ajax populating dropdowns not working in IEAjax 填充下拉菜单在 IE 中不起作用
【发布时间】：2012-07-10 14:30:58
【问题描述】：

这几天一直在纠结一些代码，一直没有进展。我需要帮助。这是我想要做的：

手动填充两个下拉列表中的第一个
获取第一个的选定值，用它来查询数据库，填充第二个带有查询结果的下拉菜单。
使用按钮触发另一个函数以生成 PDF。

我的网站上有此代码，并且可以正常工作。问题是它只适用于 FF 和 Chrome。我无法在 IE 中填充下拉列表。为了测试，我将代码剥离到几乎没有，只是为了看看 IE 是否会填充第二个下拉列表，但它不会。下面是测试页面的代码：

test.htm:

<html><head>
<script type="text/javascript">
function showCMB2(str)
{
if (str=="")
{
  document.getElementById("cmb2").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("cmb2").innerHTML=xmlhttp.responseText;
  }
}

xmlhttp.open("GET","test.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="cmb1" id="cmb1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br />

<input type="button" value="Retrieve Data"   
 OnClick="showCMB2(cmb1.options[cmb1.selectedIndex].value)"> 
<br><br><br>
<span name="cmb2" id="cmb2"></span>
</body>
</html>

test.php:

<?php
echo '<select name="cmb2" id="cmb2">';
echo '<option value="cmb2">This is test</option>';
echo '</select>';
?>

就像我说的，这在 FF 和 Chrome 中效果很好，但在 IE 中却不行。 id 为 cmb2 的 test.htm 中的跨度我尝试过制作它，甚至是，行为没有变化。任何人都可以提供任何见解吗？这看起来很简单。

【问题讨论】：

IE（至少是旧版本）不允许您修改选择的内容（动态添加<option>s）所以您需要做的是删除整个<select> 并放入一个新的.

标签： php javascript ajax cross-browser

【解决方案1】：

您来自服务器的响应正在尝试添加一个与您分配给 span 元素具有相同 id 的元素 - id 必须是唯一的..

【讨论】：

【解决方案2】：

设置 innerHTML 在 IE8 中无法正常工作。而是使用 jquery 函数 $('#elementId').html(' .... ');

请注意，您必须具有 value= 属性，否则当 IE 将选项值传递给另一个 javascript 函数时，它将传递 null。

【讨论】：