JavaScript实现省市区三级联动

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

首先是js

$(document).ready(function(){ getErpMarketByParentCode(0,'province',province); getErpMarketByParentCode(province,'city',city); getErpMarketByParentCode(city,'area',area); getErpMarketByParentCode(area,'market',market); $('#city').append($('<option>').val('').html('-请选择-')).val(''); $('#area').append($('<option>').val('').html('-请选择-')).val(''); if($('#market')){ $('#market').append($('<option>').val('').html('-请选择-')).val(''); } $('#province').change(function(){ if($(this).val() == ''){ // 请选择  $('#city').empty();  $('#area').empty();  $('#city').append($('<option>').val('').html('-请选择-')).val('');  $('#area').append($('<option>').val('').html('-请选择-')).val('');  if($('#market')){  $('#market').empty();  $('#market').append($('<option>').val('').html('-请选择-')).val('');  }  return; } getErpMarketByParentCode($(this).val(),'city'); $('#area').empty(); $('#area').append($('<option>').val('').html('-请选择-')).val(''); });  $('#city').change(function(){ getErpMarketByParentCode($(this).val(),'area'); if($('#market')){  $('#market').empty();  $('#market').append($('<option>').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($('<option>').val('').html('-请选择-'));    $.each(data.erpMarketList,function(i, erpMarket){     select.append($('<option>').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<ErpMarket> erpMarketList = erpMarketService.getErpMarketListByParentCode(code); JSONObject jsonObject = new JSONObject(); jsonObject.put("erpMarketList",erpMarketList); response.getWriter().write(jsonObject.toString()); return null; }

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

public List<ErpMarket> getErpMarketListByParentCode(String parentCode){ Hashtable erpMarketTable = LoadOnStartService.erpMarketTable;//从内存中获取这张表 List<ErpMarket> erpMarketList = new ArrayList<ErpMarket>(); 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; }