使用Ajax动态加载Select选项-优快云博客

本文介绍了一种利用Ajax技术实现在网页上动态更新Select下拉框内容的方法。当用户更改第一个Select的内容时，会触发Ajax请求加载新的选项到第二个Select中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Author:zfive5(zhaozidong)
Email :zfive5@yahoo.com.cn

礼拜五下午公司网站维护的同事问我怎样实现一个功能，一个提
交页上有两个select，第二个select根据第一个select变，我的
第一念头就是用ajax！

test.htm:

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function GetContent(param)
{
url="";
if(window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}

if(param==0)
{
url="zfive5.htm";
}
else
{
url="zfive6.htm";
}

xmlhttp.open("GET",url);
xmlhttp.onreadystatechange=oncallback;
xmlhttp.send(url);

}

function oncallback()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
document.getElementById("zfive5").innerHTML=xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<form method="get" id="zf5" action="#">
<table>
<tr>
<td>
Type:<select id="name1" οnchange="javascript:GetContent(this.selectedIndex);" >
<option value="1" selected>1.zfive5</option>
<option value="2">2.zfive6</option>
</select>
</td>
<td id=zfive5>
Person:<select id="name2" NAME="name2">
<option value="zfive5">zfive5</option>
<option value="zqqa">zqqa</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>