调接口省市区三级联动相关代码

//加载省份
$.ajax({
type: ‘GET‘,
url: "/cifcogroup/application/web/index.php?r=supply-chain-finance/choose-area&userId="+913555801+"&level=1&pid=0" ,
success: function (data) {
console.log(data);
if (data.status == true) {
var area=data.msg.areaInfos;
console.log(area);
for(var i=0;i<area.length;i++){
$("#province").append(
‘<option value="‘+area[i].areaId+‘">‘+area[i].areaName+‘</option>‘
)
}
}
if (data.status == false) {
var error = data.error.error_msg;
$(".layerbigb .titlemsg").text(error);
$(".layerbigb").css("display", "block");
return false
}
},
error: function (data) {
console.log(data.error.error_msg)
}
})

$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
};
var userId = $.getUrlParam("userId");
var merchant_id=$.getUrlParam("merchant_id");
var region="";

var areaId=$(‘#province option:selected‘) .val();//省份id
var cityId=$(‘#city option:selected‘) .val();//省份id
$(‘.mainnew_check‘).find(‘input[type=checkbox]‘).bind(‘click‘, function() {
$(‘.mainnew_check‘).find(‘input[type=checkbox]‘).not(this).attr("checked", false);
if($("#ckb1").prop("checked")){
$("#handing_type").val("0")
}
if($("#ckb2").prop("checked")){
$("#handing_type").val("1")
}
console.log( $("#handing_type").val());
});
console.log( $("#handing_type").val());
var province = $("#province option:selected").text();
$(‘#province‘).change(function () {
province = $("#province option:selected").text();
console.log(province);
$(".p1").html(province);
areaId=$(‘#province option:selected‘) .val();
console.log(areaId);
$(".p2").html("市区");
$("#city").empty();
$(".p3").html("城区");
$("#county").empty();

$.ajax({
type: ‘GET‘,
url: "/cifcogroup/application/web/index.php?r=supply-chain-finance/choose-area&userId="+913555801+"&level=2&pid="+areaId ,
success: function (data) {
console.log(data);
if (data.status == true) {
var area=data.msg.areaInfos;
console.log(area);
/* for(var i=0;i<area.length;i++){
$("#city").append(
‘<option value="‘+area[i].areaId+‘">‘+area[i].areaName+‘</option>‘
)
}
var str="";
for(var i=0;i<area.length;i++){

str+= ‘<option value="‘+area[i].areaId+‘">‘+area[i].areaName+‘</option>‘;

}

//

$("#city").append(str);
}
if (data.status == false) {
var error = data.error.error_msg;
$(".layerbigb .titlemsg").text(error);
$(".layerbigb").css("display", "block");
return false
}
},
error: function (data) {
console.log(data.error.error_msg)
}
})
});
//获取省份id

var city = $("#city option:selected").text();
$(‘#city‘).change(function () {
$(".p3").html("城区");
$("#county").empty();
city = $("#city option:selected").text();
console.log(city);
$(".p2").html(city);
cityId=$(‘#city option:selected‘) .val();

$.ajax({
type: ‘GET‘,
url: "/cifcogroup/application/web/index.php?r=supply-chain-finance/choose-area&userId="+913555801+"&level=3&pid="+cityId ,
success: function (data) {
console.log(data);
if (data.status == true) {
var area=data.msg.areaInfos;
console.log(area);
/* for(var i=0;i<area.length;i++){
$("#city").append(
‘<option value="‘+area[i].areaId+‘">‘+area[i].areaName+‘</option>‘
)
}*/
var str="";
for(var i=0;i<area.length;i++){

str+= ‘<option value="‘+area[i].areaId+‘">‘+area[i].areaName+‘</option>‘;

}
$("#county").append(str);
}
if (data.status == false) {
var error = data.error.error_msg;
$(".layerbigb .titlemsg").text(error);
$(".layerbigb").css("display", "block");
return false
}
},
error: function (data) {
console.log(data.error.error_msg)
}
})
});
var county = $("#county option:selected").text();
$(‘#county‘).change(function () {

county = $("#county option:selected").text();
console.log(county);
$(".p3").html(county)
region=""+province+city+county;
console.log(region)
});

console.log(region);

原文地址:https://www.cnblogs.com/ppm0325/p/8430655.html

时间: 2024-11-06 11:28:02

调接口省市区三级联动相关代码的相关文章

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

JS省市区三级联动

不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html><head><title>纯JS省市区联动</title><script type="text/javascript" src="jsAddress.js"></script></head><bod

vue仿京东省市区三级联动选择组件

工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section class="address"> <secti

用jQuery实现省市区三级联动(可做插件)

用jQuery实现省市区三级联动(可做插件) 有参考别的文档,如有雷同,不胜感激 先上效果图 上三级联动代码 city.html <!DOCTYPE html> <html> <head> <title>city.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http

收货地址--实现省市区三级联动和使用drf-extensions扩展使用缓存

主要实现省市区三级联动和在Django REST framework中使用缓存. 在用户录入地址时,需要进行省市区的选择.在页面加载时,向后端请求省份数据,当用户选择确定省份后,向后端请求该省份的城市数据:在用户选择确定城市数据后,向后端请求该城市的区县信息.我们把这个过程称为省市区三级联动. 我们新建一个应用areas来实现省市区三级联动. 1)终端:cd meiduo_mall/meiduo_mall/apps 2)创建areas子应用:python ../../manage.py star

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min

转: javascript实现全国城市三级联动菜单代码

<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="JavaScript"> function Dsy() { this.Items = {}; } Dsy

省市区三级联动(二)JS部分简单版

通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的函数 $("#sjld").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <