JavaScript----下拉框二级联动效果

版权声明:一心不安 https://blog.csdn.net/qq_42700595/article/details/83443917

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script language="JavaScript">
        function getcity(element){
            var pro=element.value;
            var city = document.getElementById("city");
            switch (pro){
                case "请选择省份":
                    city.length=0;
                    city.appendChild(new Option("请选择城市"));
                    break;
                case "河南省":
                    city.length=0;
                    city.appendChild(new Option("濮阳市","py"));
                    city.appendChild(new Option("郑州市","zz"));
                    city.appendChild(new Option("鹤壁市","hb"));
                    break;
                case "湖北省":
                    city.length=0;
                    city.appendChild(new Option("武汉","wh"));
            city.appendChild(new Option("武昌","wc"));
                    break;
                case "广东省":
                    city.length=0;
                    city.appendChild(new Option("惠州市","hz"));
                    city.appendChild(new Option("深圳市","sz"));
                    city.appendChild(new Option("东莞市","dg"));
                    break;
            }
        }
    </script>
</head>
<body>
    <select onchange="getcity(this)">
        <option>请选择省份</option>
        <option>河南省</option>
        <option>湖北省</option>
        <option>广东省</option>
    </select>
    <select id="city">
        <option>请选择城市</option>
    </select>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42700595/article/details/83443917