上面是执行成功的界面。
下面是源码
<!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>
<title>无标题页</title>
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//2.采用js-ajax原生态语法-1:成功，下面所用
function createXmlHttp(){//创建AJAX(XmlHttpRequest)
var XmlHttp = false;
try{
XmlHttp = new XMLHttpRequest();
}catch(e1){
try{
XmlHttp = new ActiveXObject("Microsoft.XmlHttp");
}catch(e2){
try{
XmlHttp = new ActiveXObject("Msxml2.XmlHttp");
}catch(e3){
XmlHttp = false;
}
}
}
return XmlHttp;
}
/**
* 执行Ajax:url传参
*/
function doAjax(url,mothedName,state){
var astate=true;
if(state!=null){
if(state==false){
astate=false;
}
}
//alert(astate);
var XmlHttp =createXmlHttp();
if(!XmlHttp){//创建XmlHttpRequest
alert("此浏览器不支持AJAX");
}else{
//2 建立URL地址
var url = encodeURI(url);
//3 连接地址
XmlHttp.open("POST",url,astate);
//alert(url);
//4 从服务器上返回以后,调用ispinming函数
XmlHttp.onreadystatechange = function(){doAjaxNext(XmlHttp,mothedName);};
XmlHttp.setRequestHeader("If-Modified-Since","0");
//5 发送
XmlHttp.send(null);
}
}
function doAjaxNext(XmlHttp,mothedName){//调用的函数
if(XmlHttp.readyState==4){//正常
if(XmlHttp.status==200){// 正常
var result = unescape(XmlHttp.responseText);//从Action中返回的值
//alert(result);
if(result!=""){
if(mothedName){
eval(mothedName+"(result)");
}else{
doNext(result);//
}
}
}else if(XmlHttp.status==404){//错误
alert("404错误:找不到文件或目录");
}else if(XmlHttp.status==500){//错误
alert("500错误:服务器内部错误");
}
}
}
</script>
<body>
<form id="form1" name="form1">
<p><select id="city_id_0" name="a_sheng" onchange="getshengshixian1(0)"><option value="">请选择省份</option></select>
<select id="city_id_1" name="a_shi" onchange="getshengshixian1(1)"><option value="">请选择地级市</option></select>
<select id="city_id_2" name="a_xian"><option value="">请选择市/县级市/县</option></select>
<br>
<script type="text/javascript">
//列出省市县 省：0 市：1 县：2
function getshengshixian1(jibie){
if(jibie == 0){
var sheng = document.form1.a_sheng.value;
//alert(sheng);
list_shi1(sheng);
}else if(jibie == 1){
var shi = document.form1.a_shi.value;
//alert(shi);
list_xian1(shi);
}
}
var city_form_id1;
function addSelectList1(obj){
var list = document.getElementById(city_form_id1);
var bb=obj.split(";");
var cc;
clearList1(list);
for(var i = 0; i <bb.length; i++){
var newOption = document.createElement("option");
cc = bb[i].split(",");
newOption.setAttribute("value", cc[0]);
newOption.appendChild(document.createTextNode(cc[1]));
list.appendChild(newOption);
}
//alert(list);
}
function clearList1(list){
for(var i = list.options.length; i >= 1; i--){
list.remove(i);
}
}
function list_sheng1(){
city_form_id1="city_id_0";//
doAjax("http://center.smesd.gov.cn/util?o=areaselect&supercode=1030","doNext1");
var list = document.getElementById("city_id_1");
if(list){
clearList1(list);
}
}
function list_shi1(supercode){
city_form_id1="city_id_1";//
doAjax("http://center.smesd.gov.cn/util?o=areaselect&supercode="+supercode,"doNext1");
var list = document.getElementById("city_id_2");
if(list){
clearList1(list);
}
}
function list_xian1(supercode){
city_form_id1="city_id_2";//
doAjax("http://center.smesd.gov.cn/util?o=areaselect&supercode="+supercode,"doNext1");
}
function doNext1(obj){//obj:data
addSelectList1(obj);
}
list_sheng1();
//getshengshixian1(0);
</script>
</form>
</body>
</html>
