因为引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);
}
}
}
}