PHP AJAX实现省市联动

1,province.php

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<title>select province and city - www.jbxue.com</title>  
<script type="text/javascript" src="ajax.js"></script>  
<script type="text/javascript">  
    function $(id){  
        return document.getElementById(id);  
    }  
    function getCity(){  
        var http_request=createAjax();  
        var url="/ajax/province_do.php";  
        var data="province="+$("province").value;  
        http_request.onreadystatechange=process;  
        http_request.open("post",url,true);  
        http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
        http_request.send(data);  
        function process(){  
            if(http_request.readyState==4 && http_request.status==200){  
                var city=http_request.responseXML.getElementsByTagName("city");  
                $("city").length=0;  
                var myoption=document.createElement("option");  
                myoption.innerText="---市---";  
                $("city").appendChild(myoption);  
                for(var i=0;i<city.length;i++){  
                    var cityList=city[i].childNodes[0].nodeValue;  
                    var myoption=document.createElement("option");  
                    myoption.value=cityList;  
                    myoption.innerText=cityList;  
                    $("city").appendChild(myoption)  
                }  
            }  
        }  
    }  
</script>  
</head>  
<body>  
<form>  
<select id="province" οnchange="getCity();">  
    <option value="">---省---</option>  
    <option value="zhejiang">浙江</option>  
    <option value="shaanxi">陕西</option>  
</select>  
<select id="city">  
    <option value="">---市---</option>  
</select>  
<select id="country">  
    <option value="">---县---</option>  
</select>  
</form>  
</body>  
</html>  

 province_do.php

<?php  
header("Content-Type:text/xml;charset=utf-8");  
header("Cache-Control:no-cache");  
    $province=$_POST['province'];  
    $cityinfo="";  
    if ($province=="zhejiang"){  
        $cityinfo="<province><city>杭州</city><city>金华</city><city>台州</city></province>";  // www.jbxue.com
    }elseif ($province=="shaanxi"){  
        $cityinfo="<province><city>汉中</city><city>安康</city><city>商洛</city></province>";  
    }  
    echo $cityinfo;  
?>  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的基于 jQuery 和 Ajax 实现省市三级联动的示例代码: HTML 代码: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区</option> </select> ``` JavaScript 代码: ```javascript $(function() { // 加载省份列表 $.ajax({ url: 'province.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, province) { $('#province').append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 加载城市列表 $('#province').change(function() { var provinceId = $(this).val(); if (provinceId != '') { $.ajax({ url: 'city.php', type: 'GET', dataType: 'json', data: {provinceId: provinceId}, success: function(data) { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区</option>'); } }); // 加载区列表 $('#city').change(function() { var cityId = $(this).val(); if (cityId != '') { $.ajax({ url: 'district.php', type: 'GET', dataType: 'json', data: {cityId: cityId}, success: function(data) { $('#district').empty().append('<option value="">请选择区</option>'); $.each(data, function(index, district) { $('#district').append('<option value="' + district.id + '">' + district.name + '</option>'); }); } }); } else { $('#district').empty().append('<option value="">请选择区</option>'); } }); }); ``` 省份列表数据接口(province.php)返回 JSON 数据格式: ```json [ {"id": "110000", "name": "北京市"}, {"id": "120000", "name": "天津市"}, // 省份数据... ] ``` 城市列表数据接口(city.php)根据省份 ID 返回 JSON 数据格式: ```json [ {"id": "110100", "name": "北京市"}, {"id": "110200", "name": "城市"}, // 城市数据... ] ``` 区列表数据接口(district.php)根据城市 ID 返回 JSON 数据格式: ```json [ {"id": "110101", "name": "东城区"}, {"id": "110102", "name": "西城区"}, // 区数据... ] ``` 以上是一个简单的 jQuery 和 Ajax 实现省市三级联动的示例代码,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值