html
<select name="" id="province"></select>
<select name="" id="city"> </select>
<select name="" id="qu"> </select>
<select name="" id="town"> </select>
JS`
var province = document.getElementById('province');
var city = document.getElementById('city');
var qu = document.getElementById('qu');
var town = document.getElementById('town');
var provinceData = area;
var cityDatz;
var quData;
var town; // 初始化
creatOpt(province, provinceData)
// 初始化市 selector.value 返回选中的option的值
var proVal = province.value;
cityDatz = provinceData[proVal][0];
creatOpt(city, cityDatz);
// 初始化区
var selectCity = city.value;
quData = cityDatz[selectCity];
for (var i = 0; i < quData.length; i++) {
creatOpt(qu, quData[i]);
}
// 初始化镇
var selectqu = qu.value;
townData=quData[0][selectqu];
townArr=townData.replace(/[' ']/g,'').split('、')
creatOpt(town,townArr)
province.onchange = function () {
var opts = province.options;
var optsIndex = province.options.selectedIndex;
var optEl = opts[optsIndex];
var cityIndex = optEl.innerHTML;
cityDatz = provinceData[cityIndex][0]
qudata = cityDatz[quIndex][0]
clear(city);
creatOpt(city, cityDatz)
change();
// townChange();
}
city.onchange = change;
qu.onchange = townChange;
function creatOpt(sel, obj) {
if(obj.constructor===Object){
for (var x in obj) {
var opt = document.createElement('option');
opt.innerHTML = x;
opt.value = x;
sel.appendChild(opt)
}
}else if(obj.constructor==Array){
for(var j=0;j<townArr.length;j++){
var opt = document.createElement('option');
opt.innerHTML = obj[j];
sel.appendChild(opt);
}
}
}
function clear(sel) {
var opts = sel.options;
for (var i = 0; i < opts.length; i++) {
sel.removeChild(opts[i]);
i--;
}
}
function change() {
var cityOpt = city.options[city.options.selectedIndex];
var quIndex = cityOpt.innerHTML;
quData = cityDatz[quIndex]
clear(qu);
for (var i = 0; i < quData.length; i++) {
console.log(quData)
creatOpt(qu, quData[i])
}
// townChange();
}