用AJAX兑现两级联动
日期：2014-05-16 浏览次数：20618 次
用AJAX实现两级联动
<html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的结果字符串
//var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江";
var cityArray= result.split("|"); //返回的结果字符串中，值之间是以|分隔的，所以先拆分成数组
var count = cityArray.length;
dlCity.length=0; //先将下拉列表框清空
for (var i = 0; i <count; i++)
{
dlCity.options.add(new Option(cityArray[i], cityArray[i])); //将结果循环添加到下拉列表中
}
}
else
{
<html>
<head>
<script type="text/javascript">
//Ajax实现下拉框二级级联，根据第一个下拉框的值改变第二个下拉框内的列表
//根据浏览器的类型，创建xmlHttpRequest对象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//异步响应函数
function search(para)
{
var url="/search?para="+para; //后台请求的路径
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callback; //将回调函数注册给状态改变事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function callback()
{
var dlCity=document.getElementById("city");
//请求被成功响应，已接收到结果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的结果字符串
//var result = "哈尔滨|大庆||鹤岗|佳木斯|牡丹江";
var cityArray= result.split("|"); //返回的结果字符串中，值之间是以|分隔的，所以先拆分成数组
var count = cityArray.length;
dlCity.length=0; //先将下拉列表框清空
for (var i = 0; i <count; i++)
{
dlCity.options.add(new Option(cityArray[i], cityArray[i])); //将结果循环添加到下拉列表中
}
}
else
{
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
