技術標籤：Javajava

一、頁面html程式碼

省：<select style="width: 100px;" id="pre" onchange="chg(this);">
    	<option value="-1">請選擇</option>
	</select>
市：<select style="width: 100px;" id="city" onchange="chg2(this)" ;>
 
</select>
區：<select style="width: 100px;" id="area"></select>

二、js程式碼

• 省市區檔案 json資源

//宣告省
var pres = ["北京", "上海", "河南"]; //直接宣告Array
 //宣告市
var cities = [
    ["東城", "昌平", "海淀"],
    ["浦東", "高區"
 
],
    ["周口", "漯河"]
];
var areas = [
        [
            ["東城1", "東城2", "東城3"],
            ["昌平1", "昌平2", "昌平3"],
            ["海淀1", "海淀2", "海淀3"]
        ],
        [
            ["浦東1"
 
, "浦東2", "浦東3"],
            ["高區1", "高區2", "高區3"]
        ],
        [
            ["商水縣", "西華縣"],
            ["湯莊", "寮國"]
        ]
    ]
    //設定一個省的公共下標
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
 //先設定省的值
for (var i = 0; i < pres.length; i++) {
    //宣告option.<option value="pres[i]">Pres[i]</option>
    var op = new Option(pres[i], i);
    //新增
    preEle.options.add(op);
}
function chg(obj) {
    if (obj.value == -1) {
        cityEle.options.length = 0;
        areaEle.options.length = 0;
    }
    //獲取值
    var val = obj.value;
    pIndex = obj.value;
    //獲取ctiry
    var cs = cities[val];
    //獲取預設區
    var as = areas[val][0];
    //先清空市
    cityEle.options.length = 0;
    areaEle.options.length = 0;
    for (var i = 0; i < cs.length; i++) {
        var op = new Option(cs[i], i);
        cityEle.options.add(op);
    }
    for (var i = 0; i < as.length; i++) {
        var op = new Option(as[i], i);
        areaEle.options.add(op);
    }
}
function chg2(obj) {
    var val = obj.selectedIndex;
    var as = areas[pIndex][val];
    areaEle.options.length = 0;
    for (var i = 0; i < as.length; i++) {
        var op = new Option(as[i], i);
        areaEle.options.add(op);
    }
}

三、演示效果