前端部分代码:省份是预先加载出来的,访问这个页面的时候,在后台拿的数据,原理很简单,这里是freemaker的静态模版
<tr >
<td>
<label for="j_dialog_name" class="control-label x90">代理区域:</label>
<select name="agent.id" id="province" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0">-请选择-</option>
<#list listagent as agent>
<option value="${agent.id}">${agent.cname}</option>
</#list>
</select><span>省</span>
<select name="agent.id" id="city" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0">请选择</option>
</select><span>市</span>
<select name="agent.id" id="area" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
<option value="0">请选择</option>
</select><span>县(区)</span>
</td>
</tr>
jq代码
$("#province").change(function () {
$("#city option:gt(0)").remove();//先清除市和县的下拉列表
$("#area option:gt(0)").remove();
var cityid=$(this).val()//获取省份选择的值
console.log(cityid);//前台打印测试,这个不用管
if(cityid!=0){//发送ajax请求
$.ajax({
url: "bycity",
type: "post",
dataType: "json",
data:{
cityid:cityid
},
async: true,
success: function(data) {
if(data.stauts==0){//拿到后台发过来的值
var list=data.list;
console.log(list);
for (var i = 0; i < list.length; i++) {
var district = list[i];//将数据里的对象遍历取出
$("#city").append(//添加下拉选项
"<option value='" + district.id + "'>"//将id作为选项的值
+ district.cname + "</option>");
}
}else{
alert(data.message);
}
}
});
}
});
//县,和上面一样的道理
$("#city").change(function () {
$("#area option:gt(0)").remove();
var cityid=$(this).val();
console.log(cityid);
if(cityid!=100){
$.ajax({
url: "bycity",
type: "post",
dataType: "json",
data:{
cityid:cityid
},
async: true,
success: function(data) {
if(data.stauts==0){
var list=data.list;
console.log(list);
for (var i = 0; i < list.length; i++) {
var district = list[i];//将数据里的对象遍历取出
$("#area").append(//添加下拉选项
"<option value='" + district.id + "'>"//将id作为选项的值
+ district.cname + "</option>");
}
}else{
alert(data.message);
}
}
});
}
}); </script>