不需要訪問后台服務器端，不使用Ajax，無刷新，純JS實現的省市區三級聯動。
當省市區數據變動是只需調正js即可。
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>純JS省市區聯動</title>
<script type="text/javascript" src="jsAddress.js"></script>
</head>
<body>
<div>
省：<select id="cmbProvince"></select>
市：<select id="cmbCity"></select>
區：<select id="cmbArea"></select>
<br /><br />
省：<select id="Select1"></select>
市：<select id="Select2"></select>
區：<select id="Select3"></select>
<script type="text/javascript">
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陝西', '寶雞市', '金台區');
addressInit('Select1', 'Select2', 'Select3');
</script>
</div>
</body>
</html>
核心代碼如下：
var
addressInit =
function
(_cmbProvince, _cmbCity, _cmbArea, defaultProvince, defaultCity, defaultArea)
{
var
cmbProvince = document.getElementById(_cmbProvince);
var
cmbCity = document.getElementById(_cmbCity);
var
cmbArea = document.getElementById(_cmbArea);
function
cmbSelect(cmb, str)
{
for
(
var
i=0; i<cmb.options.length; i++)
{
if
(cmb.options[i].value == str)
{
cmb.selectedIndex = i;
return
;
}
}
}
function
cmbAddOption(cmb, str, obj)
{
var
option = document.createElement(
"OPTION"
);
cmb.options.add(option);
option.innerHTML = str;
option.value = str;
option.obj = obj;
}
function
changeCity()
{
cmbArea.options.length = 0;
if
(cmbCity.selectedIndex == -1)
return
;
var
item = cmbCity.options[cmbCity.selectedIndex].obj;
for
(
var
i=0; i<item.areaList.length; i++)
{
cmbAddOption(cmbArea, item.areaList[i],
null
);
}
cmbSelect(cmbArea, defaultArea);
}
function
changeProvince()
{
cmbCity.options.length = 0;
cmbCity.onchange =
null
;
if
(cmbProvince.selectedIndex == -1)
return
;
var
item = cmbProvince.options[cmbProvince.selectedIndex].obj;
for
(
var
i=0; i<item.cityList.length; i++)
{
cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i]);
}
cmbSelect(cmbCity, defaultCity);
changeCity();
cmbCity.onchange = changeCity;
}
for
(
var
i=0; i<provinceList.length; i++)
{
cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i]);
}
cmbSelect(cmbProvince, defaultProvince);
changeProvince();
cmbProvince.onchange = changeProvince;
}
var
provinceList = [
{name:
'北京'
, cityList:[
{name:
'市轄區'
, areaList:[
'東城區'
,
'西城區'
,
'崇文區'
,
'宣武區'
,
'朝陽區'
,
'豐台區'
,
'石景山區'
,
'海淀區'
,
'門頭溝區'
,
'房山區'
,
'通州區'
,
'順義區'
,
'昌平區'
,
'大興區'
,
'懷柔區'
,
'平谷區'
]},
{name:
'縣'
, areaList:[
'密雲縣'
,
'延慶縣'
]}
]},
{name:
'上海'
, cityList:[
{name:
'市轄區'
, areaList:[
'黃浦區'
,
'盧灣區'
,
'徐匯區'
,
'長寧區'
,
'靜安區'
,
'普陀區'
,
'閘北區'
,
'虹口區'
,
'楊浦區'
,
'閔行區'
,
'寶山區'
,
'金山區'
,
'松江區'
,
'青浦區'
,
'南匯區'
,
'奉賢區'
]},
{name:
'縣'
, areaList:[
'崇明縣'
]}
]}
];
|
實例下載：http://files.cnblogs.com/files/weihengblogs/jsAddress.rar