SSM框架，在Html界面利用ajax，json，jQuery实现省市区下拉框联动

1、先生成省市区表格

2、建立实体类

3、在html画出下拉框

<select id="province">
<option value="" id="">请选择省</option>
</select>
<select id="city">
<option value="" id="">请选择市</option>
</select>
<select id="area">
<option value="" id="">请选择区</option>
</select>

4、写js方法实现下拉框联动

<script type="text/javascript">

//加载页面完成后执行的方法
$(function(){
$.ajax({
type:'GET',

//数据查询路径
url:'area.do?flag=province',
async:true,
dataType:'json',
success:function(json,status,xhr){

//调用showProvincejq方法
showProvincejq(json);
}
});

$("#province").change(function(){
var value=$("#province").val();
$.ajax({
url:'area.do?flag=city',
data:{value:value},
async:true,
type:'get',
datatype:'json',
success:function(json,status,xhr){
showCityjq(json);
}
});
});

$("#city").change(function(){
var value=$("#city").val();
$.ajax({
url:'area.do?flag=area',
data:{value:value},
async:true,
type:'get',
datatype:'json',
success:function(json,status,xhr){
showAreajq(json);
}
});
});
});

function showAreajq(json){
//json字符串转化成json对象
var json=eval(json);
//以表单形式打印显示
console.table(json);
//清空第一行之后的下拉框
$("#area option:gt(0)").remove();
$.each(json, function(index, e){
var option=$('<option/>').val(e.code).text(e.name);
$("#area").append(option);
});
}

function showCityjq(json){
//json字符串转化成json对象
var json=eval(json);
//以表单形式打印显示
console.table(json);
//清空第一行之后的下拉框
$("#city option:gt(0)").remove();
$.each(json, function(index, e){
var option=$('<option/>').val(e.code).text(e.name);
$("#city").append(option);
});
}

function showProvincejq(json){
$.each(json,function(index,e){
var option=$('<option/>').val(e.code).text(e.name);
$("#province").append(option);
});
}

</script>

5、写控制层方法

@RequestMapping(value = "area.do",params = "flag=province")
//String视图解析器
public @ResponseBody List<Province> selectAll(ModelMap mp,Model model,HttpSession session,HttpServletRequest request) {
List<Province> list=provinceMapper.showProvince();
return list;
}
@RequestMapping(value = "area.do",params = "flag=city")
//String视图解析器
public @ResponseBody List<City> city(String value,ModelMap mp,Model model,HttpSession session,HttpServletRequest request) {
List<City> list=cityMapper.showCity(value);
return list;
}
@RequestMapping(value = "area.do",params = "flag=area")
//String视图解析器
public @ResponseBody List<Area> area(String value,ModelMap mp,Model model,HttpSession session,HttpServletRequest request) {
List<Area> list=areaMapper.showArea(value);
return list;
}

6、写dao层方法

<!-- 查询 如区域-->
<select id="showArea" resultMap="BaseResultMap" >
SELECT
<include refid="Base_Column_List" />
from area where citycode= #{citycode,jdbcType=VARCHAR}
</select>