省-市-区 三级联动效果（原生JS）

1. 效果：

image.png image.png

2. 原理：

• 表单元素是用value传值的，也是用value提交的。
• selected：默认选中。
• disabled：禁用。
• change：监听事件 --- 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。
• selectedIndex：选中选项的下标值。
• options：表示下列框的所有选项

3. 实现代码

html

<div class="test">
    <!--select 是行内元素-->
    <select name="province" class="province">
        <!--disabled和selected  实现效果：只读而不能选择-->
        <option value="null" selected disabled>请选择</option>
    </select>
    <select name="city" class="city">
        <option value="null" selected disabled>请选择</option>
    </select>
    <select name="area" class="area">
        <option value="null" selected disabled>请选择</option>
    </select>
</div>

css

.test{
    text-align: center;
}

js

let _province = document.querySelector(".province"),
    _city = document.querySelector(".city"),
    _area = document.querySelector(".area");
let pUrl = "province.json", 
    cUrl = "city.json", 
    aUrl = "area.json"; 

//封装ajax：
function myAjax(_type,_url,callback){//（获取数据方式，请求链接地址，回调函数）
    let xhr = new XMLHttpRequest();
    xhr.open(_type,_url);
    xhr.send();
    xhr.addEventListener("readystatechange",function(){
        if(xhr.readyState==4&&xhr.status==200){
            let result = JSON.parse(xhr.responseText);
            callback(result);//获取数据
        }
    });
}

//封装创建option元素的函数
function createOpt(parent,data){//（父级元素，获得的数组）
    for(let i=0;i<data.length;i++){
        let _opt = "<option value="+data[i].id+">"+data[i].name+"</option>";
        parent.innerHTML += _opt;
    }
}

//请求省份数据：
myAjax("get",pUrl,function(res){
    createOpt(_province,res);//调用创建函数，放在_province中
});
//选择省份，联动城市：
_province.addEventListener("change",function(){
    let index = _province.selectedIndex;//选中选项的下标值
    //options表示下列框的所有选项
    let pId = _province.options[index].value;//选中选项的value值
                
    myAjax("get",cUrl,function(cRes){//请求城市数据
        cRes.forEach((val,index)=>{
            if(val.preId == pId){//匹配 --- preId是根据json找的
                _city.innerHTML = "";
                createOpt(_city,val.list);//调用创建函数，放在_city中
            }
        })
        selCity();//调用函数 --- 选中省份，联动地区（即第三个sel）
    })
})
//选择城市，联动地区：
_city.addEventListener("change",selCity);

//联动地区的函数
function selCity(){
  //获取省份的id
  let pId = province.options[province.selectedIndex].value;
  //获取城市的id
  let cId = city.options[city.selectedIndex].value;
        
  myAjax("get",Aurl,function(aRes){//获取地区数据
      //console.log("地区",aRes);
      aRes.forEach((aVal)=>{//数组aRes的preId
          if(aVal.preId == pId){//判断地区id值与省份是否匹配
              aVal.list.forEach((aValue)=>{//数组aRes里面的list属性名里的数组的preId
                  if(aValue.preId == cId){//判断地区id值与城市是否匹配
                      _area.innerHTML = "";
                      createOpt(_area,aValue.list1);
                  }
              })
          }
     })
  })
}

json

image.png image.png image.png

匹配原理

image.png image.png