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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
简单的分页代码js实现
2016/05/17 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
如何利用python发送邮件
2020/09/26 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
环保倡议书50字
2014/05/15 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
工厂标语大全
2014/10/06 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
颐和园的导游词
2015/01/30 职场文书
教师节祝酒词
2015/08/11 职场文书
2019消防宣传标语!
2019/07/10 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android