JavaScript实现省市区三级联动_javascript技巧

来源:脚本之家  责任编辑:小易  

ajax请求到servlet,再返回数据给页面,再用javascript操作DOM填充数据,定义一组变量,用AJAX吧www.zgxue.com防采集请勿采集本网。

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

创建省市区完毕 循环第一步 for(var i=0;i;i+){ sheng.options[sheng.length]=new Option(city[i].name,i);sheng.onchange=function(){ 恢复默认选项 shi.options[0].selected=true;qu.options[0].

首先是js

这个需要用ajax来做.我一般都是用jquery来实现,非常简单.你直接可以搜索到例子. 也可以使用下面的例子.

$(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); } } });}

代码如下:自己写过的,你把数字换为省市即可 DOCTYPE html> Title 省市联动 (this);javascript\"> 一个方法可以重复的使用;function showValue(doc,arrr

然后是后台方法

留邮箱吧,我这里正好有,你需要的话可以发给我

@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; }

页面中获取值并判断的js如下: javascript\"> 这个函数是必须的,因为在area.js里每次更改地址时会调用此函数 function promptinfo() { var address=document.getElementById('

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; } }

写的似乎有点麻烦,不如直接在下拉列表的Option里添加。我简单给你写个。var arr=new Array();arr["广州01"]=["东城区内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • php+mysql+ajax+js实现省市区三级联动
  • js制作简单的三级联动
  • javascript实现省市区三级联动下拉框菜单
  • 省市区三级联动下拉框菜单javascript版
  • jquery+json 通用三级联动下拉列表
  • js实现一个省市区三级联动选择框代码分享
  • js实现三级联动效果(简单易懂)
  • asp+js三级联动下拉菜单[调用数据库数据]
  • 原生js三级联动的简单实现代码
  • 从qq网站中提取的纯js省市区三级联动菜单
  • 深入浅析同源策略和跨域访问
  • js常用字符串方法(推荐)
  • js作用域深度解析
  • javascript中cookie工具函数封装的示例代码
  • js+css实现可以凹陷显示选中单元格的方法
  • javascript dom 操作基础知识小结
  • js获取月的第几周和年的第几周实例代码
  • html5 canvas 9绘制图片实例详解
  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
  • 微信小程序实现天气预报功能
  • JavaScript实现省市县级联
  • 怎样用javascript实现省市联动,且省份和城市是从数据库读取的?
  • javascript实现省市联动市级菜单没有显示
  • javascript实现点击省份出现城市功能
  • 怎么实现HTML省市区
  • 从数据库中得到省市区,如何用javascript无刷新联动的绑到三个DROPDOWNLIST中
  • 怎么样通过javascript实现省市级联功能
  • 【javascript】求省市区三级联动的js!
  • 如何用js实现省市区之间的三级联动
  • javascript如何实现4级联动
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧php+mysql+ajax+js实现省市区三级联动js制作简单的三级联动javascript实现省市区三级联动下拉框菜单省市区三级联动下拉框菜单javascript版jquery+json 通用三级联动下拉列表js实现一个省市区三级联动选择框代码分享js实现三级联动效果(简单易懂)asp+js三级联动下拉菜单[调用数据库数据]原生js三级联动的简单实现代码从qq网站中提取的纯js省市区三级联动菜单深入浅析同源策略和跨域访问js常用字符串方法(推荐)js作用域深度解析javascript中cookie工具函数封装的示例代码js+css实现可以凹陷显示选中单元格的方法javascript dom 操作基础知识小结js获取月的第几周和年的第几周实例代码html5 canvas 9绘制图片实例详解js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)微信小程序实现天气预报功能js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法详解使用js如何制作简单的ascii图与单极图浅谈微信小程序之官方ui框架we-ui使用教程为数据添加append,remove功能layui原生表单验证的实例javascript 匿名函数(anonymous functiojs仿qq好友列表展开、收缩功能(第一篇)利用webbrowser彻底解决web打印问题(包括js实现拖动滚动条评分的效果代码分享利用js延迟加载百度分享代码,提高网页速度js正则替换去空格的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved