请问在对接接口后不知道怎么改地区

img


怎么让每一级都有全部选项,像上海,北京这种只显示一级,不显示二级

当你从接口拿到返回数据的时候,需要进行二次处理
遍历返回数组,对北京,上海只push一级数据,对其他省,在二级数据unshift一个"全部"到二级数组头部,这样就可以了。

接口应该返回2个数组的值,一个省份,一个城市的列表。

其实这个属于级联下拉,但你没做好联动吧,一级列表里面的每一个元素都对应着一个地区数组,比如说一级菜单为a=["河南","上海","北京"]
那么二级菜单如下河南=["郑州","开封","洛阳"...] ,上海=["浦东","黄浦区","嘉定区"....] 以此类推,当点击一级菜单里的一个元素,则展示二级菜单里对应的所有数据
给你一个js原生的小案例吧,你看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联下拉</title>
</head>
<body>
<select id="province" onchange="handleChange()">
    <option value="0">河南</option>
    <option value="1">河北</option>
    <option value="2">山东</option>
    <option value="3">山西</option>
</select>
<select name="" id="city">
    <option value="0">郑州</option>
    <option value="1">洛阳</option>
    <option value="2">南阳</option>
    <option value="3">安阳</option>
</select>
</body>
<script>
    var a0=["郑州","洛阳","南阳","安阳"];
    var a1=["石家庄","保定","承德","邯郸"];
    var a2=["济南","青岛","菏泽","枣庄"];
    var a3=["太原","晋城","吕梁","长治"];
    var a=[a0,a1,a2,a3];
    function handleChange() {
        var proDom=document.querySelector("#province");
       //a[prodom.value]//获取省份对应的城市数组
        var html="";
        for (var i=0;i<a[proDom.value].length;i++){
            html+='<option value="'+i+'">'+a[proDom.value]
                [i]+'</option>';
        }
        console.log(html);
        var cityDom=document.querySelector("#city");
        city.innerHTML=html;
    }
</script>
</html>