JavaScript实现省市区三级联动


Posted in Javascript onFebruary 13, 2020

本文实例为大家分享了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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery传参及获取方式(两种方式)
Feb 13 #jQuery
JS实现页面数据懒加载
Feb 13 #Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 #Javascript
原生JS与JQ获取元素的区别详解
Feb 13 #Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 #Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 #Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php操作xml
2013/10/27 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
理解Python中函数的参数
2015/04/27 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python实现打印实心和空心菱形
2019/11/23 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
销售主管岗位职责
2014/02/08 职场文书
教师校本培训方案
2014/02/26 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
优秀校长事迹材料
2014/12/24 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis