天天看點

前端基礎----省市二級關聯----js新手必會小案例

js面試題變成必考項目!省市二級關聯,因為本人也是小白,var的名稱沒有用高端的英文,用a,b等代替,希望大佬們忽視. 考頻非常高!

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var a = new Array();
        a[0]="遼甯";
        a[1]="吉林";
        var b = new Array();
        b[0] = new Array();
        b[1] = new Array ();
        b[0][0] = "沈陽";
        b[0][1] = "大連";
        b[1][0] = "長春";
        b[1][1] = "吉林";
       function changeCity(){
        var city = document.getElementById("city");
            var province = document.getElementById("province");
            city.options.length = 0;
            var o  = province.options[province.selectedIndex].value;
           for(var i = 0; i < b[o].length; i++){
               var text = b[o][i];
               city.options[city.options.length]=new Option (text,i);
           }
       }     
    
    
    
    </script>
</head>
<body>
    <select name="province" id="province" onchange="changeCity()">
        <option value="">請輸入你的省份</option>
        <script>
            for(var i = 0 ; i<a.length ; i++  ){
                document.write("<option value='" + i + "'>" + a[i] + "</option>");
            }
        </script>
    </select>   
    <select name="city" id="city">
            <option >請選擇城市</option>
        </select>
</body>
</html>
           

繼續閱讀