三级联动

<div class="am-form-group">
<label for="user-address" class="am-form-label">所在地</label>
                   <div class="am-form-content address">
 <select id="province">
<option>---请选择---</option>
</select>
<select id="city">
<option>---请选择---</option>
</select>
<select id="area">
<option>---请选择---</option>
</select>
<input type="hidden" name="province"/>
<input type="hidden" name="city"/>
<input type="hidden" name="area"/>
          </div>

</div>

js代码

<script type="text/javascript">
$(function(){
var province="";
var city="";

var area="";

                                                    //追加省份下拉

$.post(
"<%=path%>/getchina",
{pid:"0"},
function(obj){
for(var i in obj){
$("#province").append("<option value="+obj[i].id+">"+obj[i].name+"</option>");
}
},"json"
);
//省份改变 追加市列表
$("#province").change(function(){
province=$("#province option:selected").text();
$("[name=province]").val(province);
$("#city").empty();
$("#city").append("<option>---请选择---</option>");
$("#area").empty();
$("#area").append("<option>---请选择---</option>");
var pid=$("#province option:selected").val();
$.post(
"<%=path%>/getchina",
{pid:pid},
function(obj){
for(var j in obj){
$("#city").append("<option value="+obj[j].id+">"+obj[j].name+"</option>");
}
},"json"
);
});
//市改变  追加区列表
$("#city").change(function(){
city=$("#city option:selected").text();
$("[name=city]").val(city);
$("#area").empty();
$("#area").append("<option>---请选择---</option>");
var pid=$("#city option:selected").val();
$.post(
"<%=path%>/getchina",
{pid:pid},
function(obj){
for(var k in obj){
$("#area").append("<option value="+obj[k].id+">"+obj[k].name+"</option>");
}
},"json"
);
});

$("#area").change(function(){
area=$("#area option:selected").text();
$("[name=area]").val(area);
});
});
</script>