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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
解决Python一行输出不显示的问题
2018/12/03 Python
使用pandas读取文件的实现
2019/07/31 Python
python编写俄罗斯方块
2020/03/13 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
精彩自我鉴定
2014/01/16 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
委托书样本
2014/04/02 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
质量安全标语
2014/06/07 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
基层党支部整改方案
2014/10/25 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis