本文实例为大家分享了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;
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript实现省市区三级联动”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2025年11月01日
2025年11月01日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]