java实现省市区的联动_JavaScript实现省市区三级联动

本文实例为大家分享了JavaScript实现省市区三级联动的具体代码，供大家参考，具体内容如下

首先是js

$(document).ready(function(){

getErpMarketByParentCode(0,'province',province);

getErpMarketByParentCode(province,'city',city);

getErpMarketByParentCode(city,'area',area);

getErpMarketByParentCode(area,'market',market);

$('#city').append($('').val('').html('-请选择-')).val('');

$('#area').append($('').val('').html('-请选择-')).val('');

if($('#market')){

$('#market').append($('').val('').html('-请选择-')).val('');

}

$('#province').change(function(){

if($(this).val() == ''){ // 请选择

$('#city').empty();

$('#area').empty();

$('#city').append($('').val('').html('-请选择-')).val('');

$('#area').append($('').val('').html('-请选择-')).val('');

if($('#market')){

$('#market').empty();

$('#market').append($('').val('').html('-请选择-')).val('');

}

return;

}

getErpMarketByParentCode($(this).val(),'city');

$('#area').empty();

$('#area').append($('').val('').html('-请选择-')).val('');

});

$('#city').change(function(){

getErpMarketByParentCode($(this).val(),'area');

if($('#market')){

$('#market').empty();

$('#market').append($('').val('').html('-请选择-')).val('');

}

});

$('#area').change(function(){

getErpMarketByParentCode($(this).val(),'market');

});

});

function getErpMarketByParentCode(parentCode, id, value){

$.ajax({

url:'/getErpMarketByParentCode',

type:'post',

data:{

code:parentCode

},

dataType : 'json',

error:function(){

alert('error');

},

success:function(data){

var select = $('#' + id);

if(select){

select.empty();

select.append($('').val('').html('-请选择-'));

$.each(data.erpMarketList,function(i, erpMarket){

select.append($('').val(erpMarket.code).html(erpMarket.name));

});

select.val(value);

}

}

});

}

然后是后台方法

@RequestMapping(value = "/getErpMarketByParentCode")

public ModelAndView getErpMarketByParentCode(HttpServletRequest request, HttpServletResponse response) throws Exception {

String code = request.getParameter("code");

List erpMarketList = erpMarketService.getErpMarketListByParentCode(code);

JSONObject jsonObject = new JSONObject();

jsonObject.put("erpMarketList",erpMarketList);

response.getWriter().write(jsonObject.toString());

return null;

}

service方法，是从内从中获取省市区这张表

public List getErpMarketListByParentCode(String parentCode){

Hashtable erpMarketTable = LoadOnStartService.erpMarketTable;//从内存中获取这张表

List erpMarketList = new ArrayList();

Iterator its = erpMarketTable.keySet().iterator();

while(its.hasNext()){

String key = Util.getString(its.next());

ErpMarket erpMarket = (ErpMarket)erpMarketTable.get(key);

if(parentCode.equals(erpMarket.getParentCode())){

erpMarketList.add(erpMarket);

}

}

return erpMarketList;

}

省市区的实体类

package com.erp.entity;

/**

* ErpMarket entity.

*

* @author MyEclipse Persistence Tools

*/

public class ErpMarket implements java.io.Serializable {

// Fields

private String code;

private String shortCode;

private String name;

private String level;

private String parentCode;

// Constructors

/** default constructor */

public ErpMarket() {

}

/** full constructor */

public ErpMarket(String shortCode, String name, String level, String parentCode) {

this.shortCode = shortCode;

this.name = name;

this.level = level;

this.parentCode = parentCode;

}

// Property accessors

public String getCode() {

return this.code;

}

public void setCode(String code) {

this.code = code;

}

public String getShortCode() {

return this.shortCode;

}

public void setShortCode(String shortCode) {

this.shortCode = shortCode;

}

public String getName() {

return this.name;

}

public void setName(String name) {

this.name = name;

}

public String getLevel() {

return this.level;

}

public void setLevel(String level) {

this.level = level;

}

public String getParentCode() {

return this.parentCode;

}

public void setParentCode(String parentCode) {

this.parentCode = parentCode;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。