小编给大家分享一下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;
}省市区的实体类
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;
}
}以上是“JavaScript实现省市区三级联动的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
