test.html
<html>
<title></title>
<head>
<script
type="text/javascript"
src="__PUBLIC__/js/jquery-1.5.1.min.js"></script>
<script
type="text/javascript">
$(function(){
getProvince();
$("#province").change(function(){
getDistrict();
});
$("#district").change(function(){
getCity();
});
function
getProvince()
{
$.getJSON("__URL__/getProvince",
function(data) {
$.each(data,
function(i, item) {
$("<option></option>").val(item['province']).text(item['province']).appendTo($("#province"));
});
getDistrict();
});
}
function
getDistrict()
{
$("#district").empty();
$.getJSON("__URL__/getDistrict",
{province:$("#province").val()}, function(data) {
$.each(data,
function(i, item) {
$("<option></option>").val(item['district']).text(item['district']).appendTo($("#district"));
});
getCity();
});
}
function
getCity()
{
$("#city").empty();
$.getJSON("__URL__/getCity",
{district:$("#district").val()}, function(data) {
$.each(data,
function(i, item) {
$("<option></option>").val(item['city']).text(item['city']).appendTo($("#city"));
});
});
}
});
</script>
<style>
select
{
width:65px;
}
#city {
width:80px;
}
</style>
</head>
<body>
<form
id="myform">
<select
name="province"
id="province"></select>
<select
name="district"
id="district"></select>