jsp下拉选价格区间_JSP省市区三级联动下拉选

JSP+Jquery+Oracle实现省市区三级联动下拉选菜单

自己搞了一下午,刚开始觉得还有点麻烦,不过搞过一遍之后就觉得简单了,供大家互相学习,具体代码如下:

1.jsp页面代码：

所在地:

请选择

请选择

请选择

2.js代码

/*加载省下拉选*/

$(function () {

$.ajax({

type: "post",

url: "${ctx}/shop/area/getProvince",

success: function (data) {

for (var i = 0; i < data.length; i++) {

$('#province_code').append("" + data[i].aName + "");

}

},

error: function () {

alert("加载省失败");

}

});

});

/*加载市下拉选*/

function getCity() {

var id = $("#province_code").val();

$("#city_code").empty();

$("#area_code").empty();

$.ajax({

type: "post",

url: "${ctx}/shop/area/getCity",

data: {"id": id},

success: function (data) {

$('#city_code').append("" + '请选择' + "");

$('#area_code').append("" + '请选择' + "");

for (var i = 0; i < data.length; i++) {

$('#city_code').append("" + data[i].aName + "");

}

},

error: function () {

alert("加载市失败");

}

});

}

;

/*加载地区下拉选*/

function getArea() {

var id = $("#city_code").val();

$("#area_code").empty();

$.ajax({

type: "post",

url: "${ctx}/shop/area/getArea",

data: {"id": id},

success: function (data) {

$('#area_code').append("" + '请选择' + "");

for (var i = 0; i < data.length; i++) {

$('#area_code').append("" + data[i].aName + "");

}

},

error: function () {

alert("加载区失败");

}

});

}3.dao层文件

public interface AreaDao {

List queryAreas(Integer pid);

Area queryAreasInfo(Integer id);

public List queryCity(Integer id);

}4.Area实体类

public class Area {

private Integer id;

private String aName;

private Integer pid;

private Integer status;

public Integer getId() {

return id;

}

public Integer getPid() {

return pid;

}

public Integer getStatus() {

return status;

}

public void setId(Integer id) {

this.id = id;

}

public void setPid(Integer pid) {

this.pid = pid;

}

public void setStatus(Integer status) {

this.status = status;

}

public String getaName() {

return aName;

}

public void setaName(String aName) {

this.aName = aName;

}

@Override

public String toString() {

return "Area [id=" + id + ", aName=" + aName + ", pid=" + pid

+ ", status=" + status + "]";

}

}5.Service层

@Service

@Transactional(readOnly = true)

public class AreasService {

@Resource

private AreaDao areasDao;

/**

* 通过pid查询Areas

*/

public List queryAreas(Integer pid) {

return this.areasDao.queryAreas(pid);

}

public Area queryArea(Integer id){

return this.areasDao.queryAreasInfo(id);

}

}6.Controller层

@RequestMapping("/shop/area")

@Controller

public class AreaController {

@Autowired

private AreasService areasService;

@RequestMapping(value="getProvince" ,method = RequestMethod.POST)

@ResponseBody

public List getProvince(){

List areas=areasService.queryAreas(0);

return areas;

}

@RequestMapping(value="getCity" ,method = RequestMethod.POST)

@ResponseBody

public List getCity(Integer id){

List areas=areasService.queryAreas(id);

return areas;

}

@RequestMapping(value="getArea" ,method = RequestMethod.POST)

@ResponseBody

public List getArea(Integer id){

List areas=areasService.queryAreas(id);

return areas;

}

}7.Mapper.xml文件

SELECT * FROM area WHERE pid=#{pid}

SELECT * FROM area WHERE id=#{id}

8.Oracle数据库结构

省市区在一个表 ，表名是AREA ，主键是ID ，省的PID=0 ， 市级的PID=省的ID，区级的PID=市级的ID

如：

ID                   ANAME         PID

100034          河南省           0

100101          郑州市         100034

100102         濮阳市          100034

111111         中原区          100101

111112          金水区         100101

111113         高新区          100101