用map和ajax省市联动,js原生实现省市两级联动

因为引Jquery太麻烦了，尝试用原生写一个关于省级联动这种类似功能的。

实现效果

这里想要的效果是如果选择省份，自动出现省份对应的城市

首先，后台返回的数据结构是这样子的

然后，我要把这些需要展示联动的关键字剥离开来，在这儿就是cityName，和它的store里面的address

result.map(item=>{

city.push({label:item.cityName,store:item.store});

})

city.map((item,index) =>{

var city = item.label;

temp = [];

if(item.store.length > 1){

item.store.map((item,index)=>{

temp.push(item.shopName);

})

area[city] = temp;

}else {

area[city] = [item.store[0].shopName];

}

})

console.log(area);

把这些数据处理完之后，出现这样的效果

接下来，html结构

请选择省份

请选择城市

第一，这个是为了更简单的写语句，类似于Jquery的写法

function $(ID){

return document.getElementById(ID);

} //

第二步，把整理好的数据，塞到各个option里面

var province = $("selProvince");

for (var i in area) {

province.add(new Option(i,i),null);

}

第三，动态响应，触发onchange事件，选择哪个，就出来相对应的option

function changeCity(){

var province = $("selProvince").value;

var city = $("selCity");

city.options.length = 0;

for (var i in area) {

if(i == province){

for (var j in area[i]) {

city.add(new Option(area[i][j],area[i][j]),null);

}

}

}

}

其中用到两个知识点

一、add(),引用官方解释

定义和用法

add() 方法用于向 添加一个 元素。

语法

selectObject.add(option,before)

参数描述

option必需。要添加选项元素。必需是 option 或 optgroup 元素。

before必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。

二、new option(); 一般用在动态生成选择项目

new Option("显示的文本labe","值value",true,true)

后面两个true分别表示默认被选中和有效!,可写可不写

最后文章的末尾放上所有代码 ：

title

请选择省份

请选择城市

window.onload = function(){

if(window.XMLHttpRequest){

var oAjax = new XMLHttpRequest();//创建ajax对象

}else {

var oAjax = new ActiveXObject("Microsoft.XMLHTTP");

}

oAjax.open("Post","XXXXXX请求的接口地址",true);

oAjax.send();

oAjax.onreadystatechange = function(){

if(oAjax.readyState == 4) {

if(oAjax.status == 200){

result = JSON.parse(oAjax.responseText).resultData.result_org;

city= [];

area = [];

result.map(item=>{

city.push({label:item.cityName,store:item.store});

})

city.map((item,index) =>{

var city = item.label;

temp = [];

if(item.store.length > 1){

item.store.map((item,index)=>{

temp.push(item.shopName);

})

area[city] = temp;

}else {

area[city] = [item.store[0].shopName];

}

})

var province = $("selProvince");

for (var i in area) {

province.add(new Option(i,i),null);

}

}else{

console.log("失败");

}

}

};

}

function $(ID){

return document.getElementById(ID);

}

function changeCity(){

var province = $("selProvince").value;

var city = $("selCity");

city.options.length = 0;

for (var i in area) {

if(i == province){

for (var j in area[i]) {

city.add(new Option(area[i][j],area[i][j]),null);

}

}

}

}