DOM操作--省份小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份小练习</title>
</head>
<body>
    <div>
        <select name="province" id="province">
            <option>--请选择--</option>
            <option>陕西省</option>
            <option>山东省</option>
        </select>
        <select id="city">
            <option>--请选择--</option>
        </select>
    </div>
    <script>
        var province = document.getElementById('province');
        province.onchange = function(){
            var city = document.getElementById('city');
            city.innerHTML = "";
            var proValue = province.value;
            var cities = [];
            switch(proValue){
                case "陕西省":
                    cities = ["西安市","渭南市","咸阳市","汉中市"];
                    break;
                case "山东省":
                    cities = ["济南市","青岛市","烟台市","威海市"];
                    break;
            }
            var temp = document.createDocumentFragment(); //文档碎片
            for(var i=0;i<cities.length;i++){
                var opt = document.createElement("option");
                opt.innerHTML=cities[i];
                temp.appendChild(opt);
            }
            city.appendChild(temp);
        }
    </script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容