本文实例为大家分享了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);

}

}
});
}
$(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;
}

@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;
}
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;
}

}
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;
}

}以上就是本文的全部内容，希望对大家的学习有所帮助。