二级联动

大家晚上好呀，大半夜的出来分享以前写过的二级联动代码，对于新人来说很有用；对于程序员来说，最注重的应该是培养思维逻辑；好了不多说，直接贴代码，这里写了两种方法：
方法一【不推荐，仅供参考】

  <select id="province" onchange="changeP()">
        <option value="0">请选择省/城市</option>
        <option value="1">深圳</option>
        <option value="2">福建</option>
        <option value="3">家</option>
    </select>
    <select id="city">
        <option ></option>
        <option ></option>
        <option ></option>
        <option ></option>
    </select>
<script>
    var province=document.getElementById("province");
    var city=document.getElementById("city");
    var citys=[
        ["","","",""],
        ["南山","福田","龙岗","宝安"],
        ["福州","漳州","厦门","龙岩"],
        ["万","事","如","意"]
    ];
    //方法一：     弊端：这种方法写的代码太长！！！！！！！！！！！！！！！！！！！！！！！
    function changeP(){
       //console.log(province.value);
        if(province.value==0){
            for(let i=0;i<citys[0].length;i++){
                city[i].value=citys[0][i];
                city[i].innerHTML=citys[0][i];
            }
        }
        if(province.value==1){
            for(var i=0;i<citys[1].length;i++){
                city[i].value=citys[1][i];
                city[i].innerHTML=citys[1][i];
            }
        }
        if(province.value==2){
            for(var i=0;i<citys[2].length;i++){
                city[i].value=citys[2][i];
                city[i].innerHTML=citys[2][i];
            }
        }
        if(province.value==3){
            for(var i=0;i<citys[3].length;i++){
                city[i].value=citys[3][i];
                city[i].innerHTML=citys[3][i];
            }
        }
    }
</script>

方法二：

    <select id="province" onchange="changeP()">
        <option value="1">请选择省/城市</option>
        <option value="2">深圳</option>
        <option value="3">福建</option>
        <option value="4">家</option>
    </select>

    <select id="city">
        <option ></option>
        <option ></option>
        <option ></option>
        <option ></option>
    </select>

<script>
    var province=document.getElementById("province");
    var city=document.getElementById("city");
    var citys=[
        ["","","",""],
        ["南山","福田","龙岗","宝安"],
        ["福州","漳州","厦门","龙岩"],
        ["万","事","如","意"]
    ]; 
    function changeP(){
        for(let i=0; i<province.value; i++){
            for(let j=0; j<city.length; j++){
                city[j].value = j;
                city[j].innerHTML = citys[i][j];
            }
        }
    }
</script>