js三级联动，看不懂的请去我上一篇js的一些认识里瞅瞅 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>


</head>
<body>
<!--        三级联动演示：
        省：四川，吉林 ， 陕西
        市：成都， 绵阳， 达州  ； 长春， 四平， 延边  ； 西安，  安康，  咸阳
        区：金牛，武侯，温江；绵1，绵2，绵3；达川，宣汉，大竹；
            朝阳，南关，净月；四平1，四平2，四平3；延边1，延边2，延边3
            西安1，西安2，西安3；安康1，安康2，安康3；咸阳1，咸阳2，咸阳3-->
<form>
    <select id="sheng">
        <option>请选择省份</option>
        <option>四川</option>
        <option>吉林</option>
        <option>陕西</option>
    </select>
    <select id="shi">
        <option>请选择市</option>
    </select>
    <select id="qu">
        <option>请选择区</option>
    </select>
</form>
<script>
    let select_sheng= document.getElementById("sheng");
    let select_shi= document.getElementById("shi");
    let select_qu= document.getElementById("qu");
    select_sheng.onclick=function (){
        select_qu.innerHTML="<option>请选择区</option>";
        switch (select_sheng.value){
            case "四川":
                select_shi.innerHTML=" <option>成都</option>\n" +
                    "            <option>绵阳</option>\n" +
                    "            <option>达州</option>";
                break;
            case "吉林":
                select_shi.innerHTML=" <option>长春</option>\n" +
                    "            <option>四平</option>\n" +
                    "            <option>延边</option>";
                break;
            case "陕西":
                select_shi.innerHTML=" <option>西安</option>\n" +
                    "            <option>安康</option>\n" +
                    "            <option>咸阳</option>";
                break;
        }
    }

        select_shi.onclick=function (){
            switch (select_shi.value){
                case "成都":
                    select_qu.innerHTML=" <option>金牛</option>\n" +
                        "            <option>武侯</option>\n" +
                        "            <option>温江</option>";
                    break;
                case "绵阳":
                    select_qu.innerHTML=" <option>绵阳1</option>\n" +
                        "            <option>绵阳2</option>\n" +
                        "            <option>绵阳3</option>";
                    break;
                case "达州":
                    select_qu.innerHTML=" <option>达川</option>\n" +
                        "            <option>宣汉</option>\n" +
                        "            <option>大竹</option>";
                    break;
                case "长春":
                    select_qu.innerHTML=" <option>朝阳</option>\n" +
                        "            <option>南关</option>\n" +
                        "            <option>净月</option>";
                    break;
                case "四平":
                    select_qu.innerHTML=" <option>四平1</option>\n" +
                        "            <option>四平2</option>\n" +
                        "            <option>四平3</option>";
                    break;
                case "延边":
                    select_qu.innerHTML=" <option>延边1</option>\n" +
                        "            <option>延边2</option>\n" +
                        "            <option>延边3</option>";
                    break;
                case "西安":
                    select_qu.innerHTML=" <option>西安1</option>\n" +
                        "            <option>西安2</option>\n" +
                        "            <option>西安3</option>";
                    break;
                case "安康":
                    select_qu.innerHTML=" <option>安康1</option>\n" +
                        "            <option>安康2</option>\n" +
                        "            <option>安康3</option>";
                    break;
                case "咸阳":
                    select_qu.innerHTML=" <option>咸阳1</option>\n" +
                        "            <option>咸阳2</option>\n" +
                        "            <option>咸阳3</option>";
                    break;

            }
    }
</script>
</body>
</html>
posted @ 2022-12-29 20:18  牛杂刻师傅  阅读(32)  评论(0)    收藏  举报