省市縣三級聯動實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市縣三級聯動</title>
    <script src="js/province.js">//省數據數組</script>
    <script src="js/city.js">//市數據數組</script>
    <script src="js/area.js">//縣數據數組</script>
    <script>
        window.onload = function () {//頁面加載完成
            var province = document.getElementById("province");
            var city = document.getElementById("city");
            var area = document.getElementById("area");
            for (var i = 0; i < provinces.length; i++) {//向省下拉列表填充數據
                var option = document.createElement("option");//創建一個option對象
                option.setAttribute("id", provinces[i].id);//設置option的id屬性的值
                option.setAttribute("value", provinces[i].id);//設置option的value屬性的值
                option.innerHTML = provinces[i].name;//向option中填充內容
                province.appendChild(option);//將potion添加到省列表中
            }
            province.onchange = function () {//省下拉列表域改變事件
                city.innerHTML = " <option value=\"0\">---請選擇---</option>";
                var array = citys[province.value];//獲取省對應的市的數組
                for (var i = 0; i < array.length; i++) {//向市下拉列表填充數據
                    var option = document.createElement("option");
                    option.setAttribute("value", array[i].id);
                    option.setAttribute("id", array[i].id);
                    option.innerHTML = array[i].name;
                    city.appendChild(option);
                }
            }
            city.onchange = function () {//市下拉列表域改變事件
                area.innerHTML = " <option value=\"0\">---請選擇---</option>";
                var array = areas[city.value];//獲取市對應的縣的數組
                for (var i = 0; i < array.length; i++) {//向縣下拉列表填充數據
                    var option = document.createElement("option");
                    option.setAttribute("value", array[i].id);
                    option.setAttribute("id", array[i].id);
                    option.innerHTML = array[i].name;
                    area.appendChild(option);
                }
            }
            area.onchange = function () {//縣下拉列表域改變事件
                var data1 = document.getElementById(province.value).innerHTML;//獲取省的值
                var data2 = document.getElementById(city.value).innerHTML;//獲取市的值
                var data3 = document.getElementById(area.value).innerHTML;//獲取縣的值
                document.getElementById("data").innerHTML = "地址：" + data1 + data2 + data3;//向界面填充結果
            }
        }
    </script>
</head>
<body>
省
<select id="province">
    <option value="0">---請選擇---</option>
</select>
市
<select id="city">
    <option value="0">---請選擇---</option>
</select>
縣
<select id="area">
    <option value="0">---請選擇---</option>
</select>
<div id="data">

</div>
</body>
</html>

 數據樣式：

省

var provinces = [{
    "name": "北京市",
    "id": "110000"
}, {
    "name": "天津市",
    "id": "120000"
}, {
    "name": "河北省",
    "id": "130000"
},..................

市

var citys = {
    "110000": [
        {
            "province": "北京市", 
            "name": "市轄區", 
            "id": "110100"
        }
    ], 
    "120000": [
        {
            "province": "天津市", 
            "name": "市轄區", 
            "id": "120100"
        }
    ],...................

縣

var areas = {
    "110100": [
        {
            "city": "市轄區", 
            "name": "東城區", 
            "id": "110101"
        }, 
        {
            "city": "市轄區", 
            "name": "西城區", 
            "id": "110102"
        },..................