因为引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结构
<select id="selProvince" onchange="changeCity()">
<option>请选择省份</option>
</select>
<select id="selCity">
<option>请选择城市</option>
</select>
第一，这个是为了更简单的写语句，类似于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() 方法用于向 <select> 添加一个 <option> 元素。
语法
selectObject.add(option,before)
参数描述
option必需。要添加选项元素。必需是 option 或 optgroup 元素。
before必需。在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。
二、new option(); 一般用在动态生成选择项目
new Option("显示的文本labe","值value",true,true)
后面两个true分别表示默认被选中和有效!,可写可不写
最后文章的末尾放上所有代码 ：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
<option>请选择省份</option>
</select>
<select id="selCity">
<option>请选择城市</option>
</select>
<script >
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);
}
}
}
}
</script>
</body>
</html>
网友评论