<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function fn() {
            var select = document.getElementById("city"); //获得城市 元素对象
            var c = select.value; //获得选择的值value=""
            
            var area = document.getElementById("area"); //获得区域 元素对象

            switch (c) { //条件语句
                case "jx": area.innerHTML = "<option>抚州市</option><option>南昌市</option><option>赣州市</option><option>宜春市</option>";
                    break;
                case "gd": area.innerHTML = "<option>广州市</option><option>韶关市</option><option>佛山市</option><option>东莞市</option>";
                    break;
                case "fj": area.innerHTML = "<option>泉州市</option><option>厦门市</option><option>福州市</option><option>漳州市</option>";
                    break;
                case "hn": area.innerHTML = "<option>长沙市</option><option>湘潭市</option><option>乐昌市</option><option>郴州市</option>";
                    break;
                default: alert("error");
            }
        };

    </script>
</head>
<body>
    <select id="city" onchange="fn()"> <!--下拉框的改变事件-->
        <option value="jx">江西</option>
        <option value="gd">广东</option>
        <option value="fj">福建</option>
        <option value="hn">湖南</option>
    </select>
    <select id="area">
        <option>抚州市</option>
        <option>南昌市</option>
        <option>赣州市</option>
        <option>宜春市</option>
    </select>
</body>

</html>

 2.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <select id="one">
        <option>请输入省份</option>
    </select>
    <select id="two">
        <option>请输入市</option>
    </select>
    <select id="three">
        <option>请输入区</option>
    </select>
    <script type="text/javascript">
        var oone = document.getElementById("one"); //获得下拉框元素对象
        var otwo = document.getElementById("two"); //获得下拉框元素对象
        var three = document.getElementById("three");//...
        var str = ''; //定义一个空字符串
        otwo.disabled = true; //禁用元素
        three.disabled = true; //禁用元素
        //包含多个个对象的数组
        var arr1 = [
            { "id": "1", "value": "北京" },
            { "id": "2", "value": "上海" },
            { "id": "3", "value": "重庆" },
            { "id": "4", "value": "天津" },
            { "id": "5", "value": "山东" }
        ];
        for (var i = 0; i < arr1.length; i++) { //遍历这个对象数组
            str += "<option value=" + arr1[i].id + ">" + arr1[i].value + "</option>"
        }
        oone.innerHTML = str;                              //添加下拉框1  【添加内容】

        var arr2 = { //json对象  ,这是一个拥有一个1【多个数组】的对象
            '1': ['101@北京'],
            '2': ['201@上海'],
            '3': ['301@重庆'],
            '4': ['401@天津'],
            '5': ['501@济南', '502@青岛']
        };
        oone.onchange = function () {                     //下拉框1内容改变事件
            var val = this.value; //获取选择项value值
            var arrA = arr2[val]; //调用json对象的值

            var str1 = '<option>请输入市</option>';
            for (var j = 0; j < arrA.length; j++) { //遍历json对象的值
                var aaa = arrA[j].split('@');//分割字符串 返回字符串数组
                str1 += "<option value=" + aaa[0] + ">" + aaa[1] + "</option>"
            }
            otwo.innerHTML = str1;                         //下拉框2 【添加内容】
            otwo.disabled = false; //下拉框元素启用
            three.innerHTML = '<option>请输入区</option>'; //下拉框3 【添加内容】
            //three.disabled = 'disabled'; //下拉框3禁用元素
            three.disabled = true; //下拉框3禁用元素
        }
        var arr3 = {
            '101': ['朝阳区', '昌平区'],
            '201': ['宝山区', '浦东区'],
            '301': ['不知道'],
            '401': ['真的不知道'],
            '501': ['市中区', '历下区', '槐荫区'],
            '502': ['市南区', '市北区', '崂山区']
        };
        otwo.onchange = function () { //下拉框2内容改变事件
            var val = this.value; //获取选择项value值
            var str2 = '<option>请输入区</option>';
            for (var l = 0; l < arr3[val].length; l++) { //遍历json对象的值
                str2 += "<option >" + arr3[val][l] + "</option>"
            }
            three.innerHTML = str2;    //                  //下拉框3 【添加内容】    
            three.disabled = false;  //取消禁用元素
        }
    </script>
</body>
</html>