ajax无刷下拉框
<?xml version="1.0" encoding="gb2312" ?>
<state>
<Country name="country" value="1" text="China">
<Province value="10" text="湖北">
<City value="101" text="武汉"></City>
<City value="102" text="黄石"></City>
<City value="103" text="黄冈"></City>
</Province>
</Country>
<Country name="country" value="2" text="America">
<Province value="20" text="肯萨斯州">
<City value="201" text="林肯"></City>
<City value="202" text="华盛顿"></City>
</Province>
</Country>
</state>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicDropDownList.aspx.cs" Inherits="DynamicDropDownList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>级联下拉框</title>
<script language="javascript" type="text/javascript">
//创建xmlHttpRequest
var _xmlHttpRequest;
function createXmlHttpRequest() {
return window.XMLHttpRequest ? new window.XMLHttpRequest : window.ActiveXObject ? new window.ActiveXObject("Microsoft.XMLHTTP") : window.XMLHttpRequest;
}
//创建xmlDocument
var _xmlDocument;
function createXmlDocument() {
if (window.ActiveXObject) {
return new window.ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation) {
return document.implementation.createDocument("", "", null);
}
else {
return null;
}
}
var contentType;//下拉框类别
var countryId;//国家id
var provinceId;//省id
function ajaxDropChange(type) {
contentType = type;
var url = "DynamicDropDownList.xml";//目标xml
var method = "GET";//传送方式
var _param;//参数
if (type == "pro") {
var _countryValue = document.getElementById("country").value;
//若为空则清除后面的下拉框的子项
if (_countryValue == "") {
var select_Province_Obj = document.getElementById("province");
for (var j = 0; j < select_Province_Obj.options.length; j++) {
select_Province_Obj.remove(j);
}
var select_City_Obj = document.getElementById("city");
for (var k = 0; k < select_City_Obj.options.length; k++) {
select_City_Obj.remove(k);
}
var _firstOption = document.createElement("option");
_firstOption.value = "";
_firstOption.text = "--请选择--";
select_Province_Obj.add(_firstOption);
select_City_Obj.add(_firstOption);
return;
}
countryId = _countryValue;
_param = "countryid=" + escape(_countryValue);
}
else if (type == "city") {
var _provinceValue = document.getElementById("province").value;
if (_provinceValue == "") {
var select_City_Obj = document.getElementById("city");
for (var j = 0; j < select_City_Obj.options.length; j++) {
select_City_Obj.remove(select_City_Obj.options[j]);
}
var _firstOption = document.createElement("option");
_firstOption.value = "";
_firstOption.text = "--请选择--";
select_City_Obj.add(_firstOption);
return;
}
provinceId = _provinceValue;
_param = "provinceid=" + escape(_provinceValue);
}
else {
_param = "";
}
ajaxRequest(method, url, _param);
}
function ajaxRequest(method, url, param) {
_xmlHttpRequest = createXmlHttpRequest(); //创建xmlhttprequest对象
_xmlHttpRequest.open(method, url, true);
_xmlHttpRequest.onreadystatechange = handleStateChange;
_xmlHttpRequest.send(null);
}
function handleStateChange() {
if (_xmlHttpRequest.readyState == 4) {
if (_xmlHttpRequest.status == 200) {
if (contentType == "pro") {
dropOptionsAddProvince(_xmlHttpRequest.responseXML);
}
else if (contentType == "city") {
dropOptionsAddCity(_xmlHttpRequest.responseXML);
}
}
}
}
function dropOptionsAddProvince(_responseXml) {
var _selectOfProvince = document.getElementById("province");
if (countryId != null && countryId != "") {
for (var i = 0; i < _responseXml.childNodes[1].childNodes.length; i++) {
//若id为选中的id则先去除下拉框的子项然后添加请选择项和其他子项
if (_responseXml.childNodes[1].childNodes[i].attributes[1].value == countryId) {
var select_Province_Obj = document.getElementById("province");
for (var j = 0; j < select_Province_Obj.options.length; j++) {
select_Province_Obj.remove(select_Province_Obj.options[j]);
}
var _firstOption = document.createElement("option");
_firstOption.value = "";
_firstOption.text = "--请选择--";
select_Province_Obj.add(_firstOption);
for (var j = 0; j < _responseXml.childNodes[1].childNodes[i].childNodes.length; j++) {
var _option = document.createElement("option");
_option.text = _responseXml.childNodes[1].childNodes[i].childNodes[j].attributes[1].value;
_option.value = _responseXml.childNodes[1].childNodes[i].childNodes[j].attributes[0].value;
select_Province_Obj.add(_option);
}
return;
}
}
}
}
function dropOptionsAddCity(_responseXml) {
var _selectOfCity = document.getElementById("city");
if (provinceId != null && provinceId != "") {
for (var i = 0; i < _responseXml.childNodes[1].childNodes.length; i++) {
//若id为选中的id则先去除下拉框的子项然后添加请选择项和其他子项
if (_responseXml.childNodes[1].childNodes[i].attributes[1].value == countryId) {
for (var j = 0; j < _responseXml.childNodes[1].childNodes[i].childNodes.length; j++) {
if (_responseXml.childNodes[1].childNodes[i].childNodes[j].attributes[0].value == provinceId) {
var select_City_Obj = document.getElementById("city");
for (var k = 0; k < select_City_Obj.options.length; k++) {
select_City_Obj.remove(select_City_Obj.options[k]);
}
var _firstOption = document.createElement("option");
_firstOption.value = "";
_firstOption.text = "--请选择--";
select_City_Obj.add(_firstOption);
for (var l = 0; l < _responseXml.childNodes[1].childNodes[i].childNodes[j].childNodes.length; l++) {
var _option = document.createElement("option");
_option.text = _responseXml.childNodes[1].childNodes[i].childNodes[j].childNodes[l].attributes[1].value;
_option.value = _responseXml.childNodes[1].childNodes[i].childNodes[j].childNodes[l].attributes[0].value;
select_City_Obj.add(_option);
}
}
return;
}
}
}
}
}
function loadCountry() {
_xmlDocument = createXmlDocument();
_xmlDocument.async = false;
_xmlDocument.load("DynamicDropDownList.xml");
var select_Country_Obj = document.getElementById("country");
//首先清除下拉框的原来的项
for (var j = 0; j < select_Country_Obj.options.length; j++) {
select_Country_Obj.remove(j);
}
var _firstOption = document.createElement("option");
_firstOption.value = "";
_firstOption.text = "--请选择--";
select_Country_Obj.add(_firstOption);
for (var i = 0; i < _xmlDocument.childNodes[1].childNodes.length; i++) {
var _option = document.createElement("option");
_option.value = _xmlDocument.childNodes[1].childNodes[i].attributes[1].value;
_option.text = _xmlDocument.childNodes[1].childNodes[i].attributes[2].value;
select_Country_Obj.add(_option);
}
}
</script>
</head>
<body onload="loadCountry();">
<form id="form1" runat="server">
<div>国家
<select id="country" onchange="ajaxDropChange('pro');">
<option></option>
</select>
省
<select id="province" onchange="ajaxDropChange('city');">
<option></option>
</select>
市
<select id="city">
<option></option>
</select>
</div>
</form>
</body>
</html>
