省市联动


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="s1"></select>
<select name="" id="s2"></select>
<script>

    let s1Ele = document.getElementById('s1');
    let s2Ele = document.getElementById('s2');
    let data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    for (let pro in data){
        let  opEle = document.createElement('option');
        opEle.innerText = pro;
        s1Ele.appendChild(opEle)
    }

    s1Ele.onchange = function () {
        s2Ele.innerHTML= '';
        let choice_pro = s1Ele.value;
        let city_list = data[choice_pro];
        for (let i=0;i<city_list.length;i++){
            let cityEle = document.createElement('option');
            cityEle.innerText = city_list[i];
            s2Ele.appendChild(cityEle)
        }
    }


</script>

</body>
</html>