省市区三级联动下拉选框---具体功能实现

来源：互联网发布：java 尚学堂300 编辑：程序博客网时间：2024/05/22 00:45

如图:

注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看:

从腾讯网站中提取的纯JS省市区三级联动: http://blog.csdn.net/hjun01/article/details/38084977

html部分:

<tr><td style="width: 69px; ">所在省市区:</td><td><select id="province" style="width: 90px; "><option value="">--选择省份--</option></select><select id="city" style="width: 90px; "><option value="">--选择城市--</option></select><select id="county" style="width: 90px; "><option value="">--选择地区--</option></select></td></tr>

js部分:

省市区通过异步查询数据库获得. 其中，DISTRICT_ID为省/市/区的id，PARENT_ID为省/市/区的父id。例如：区的父id就是市的id，市的父id就是省的id。

var areaInfo = {};$(function() {// 加载城市$("#province").change(function() {var curProvince = $(this).val();if (curProvince !== "") {areaInfo.loadCity(curProvince);} else {$("#city").empty().append('<option value="">--请选择城市--</option>');$("#county").empty().append('<option value="">--请选择地区--</option>');}});// 加载地区$("#city").change(function() {var curCity = $(this).val(); //if (curCity !== "") {areaInfo.loadCounty(curCity);}});//-----------------------------------------------------------// 加载省份areaInfo.loadProvince = function() {HttpPost("/district/getAreadistrict.do", {level : 1}, function(data) {data = data.data;for ( var i = 0; i < data.length; i++) {$("#province").append('<option value=' + data[i].DISTRICTID + '>'+ data[i].DISTRICTNAME + '</option>');}});};// 加载城市areaInfo.loadCity = function(pid) {$("#city").empty().append('<option value="">--请选择城市--</option>');$("#county").empty().append('<option value="">--请选择地区--</option>');HttpPost("/district/getAreadistrict.do", {level : 2,parentID : pid}, function(data) {data = data.data;for ( var i = 0; i < data.length; i++) {$("#city").append('<option value=' + data[i].DISTRICTID + '>'+ data[i].DISTRICTNAME + '</option>');}});};// 加载地区areaInfo.loadCounty = function(cid) {$("#county").empty().append('<option value="">--请选择地区--</option>');$("#county option[value='']").attr("selected", true);HttpPost("/district/getAreadistrict.do", {level : 3,parentID : cid}, function(data) {data = data.data;for ( var i = 0; i < data.length; i++) {$("#county").append('<option value=' + data[i].DISTRICTID + '>'+ data[i].DISTRICTNAME + '</option>');}});};});

struts配置文件:

<action name="getAreadistrict" method="getAreadistrict"  class="back.webapp.action.area.DistrictAction"><result name="success" type="json"><param name="contentType">text/html;charset=UTF-8</param><param name="jsonModel">jsonModelMap</param></result> </action>

DistrictAction.java:

public String getAreadistrict(){String level = this.request.getParameter("level");String parentID = this.request.getParameter("pid");List areadistrictJson =districtService.getAreadistrictJson(level,parentID); HashMap resultMap = new HashMap();resultMap.put("data", areadistrictJson);setJsonModelMap(resultMap);return SUCCESS; }

对应Ibatis的映射文件内容:

<select id="getAreadistrictList"  resultType="java.util.HashMap">    <![CDATA[select t.id ,t.district_name ,t.district_code       from MG_UC_DISTRICT  t    ]]>      <where>1 = 1<if test="level != null">AND t.district_level = #{level}</if><if test="pid != null">AND t.PARENT_ID = #{pid}</if><if test="pid = null">    AND t.PARENT_ID is null    </if>    </where></select>

0 0