验证中...
Languages: HTML
Categories: JavaScript 工具
Latest update 2019-06-25 10:49
gistfile1.txt
Raw Copy
<!DOCTYPE html>
<html>
<head>
<meta province="" charset="utf-8" />
<title>纯JS省市区联动</title>
<script type="text/javascript">
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.area.length; i++) {
cmbAddOption(cmbArea, item.area[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.city.length; i++) {
cmbAddOption(cmbCity, item.city[i].province, item.city[i]);
}
cmbSelect(cmbCity, defaultCity);
changeCity();
cmbCity.onchange = changeCity;
}
for(var i = 0; i < provinceList.length; i++) {
cmbAddOption(cmbProvince, provinceList[i].province, provinceList[i]);
}
cmbSelect(cmbProvince, defaultProvince);
changeProvince();
cmbProvince.onchange = changeProvince;
}
var provinceList = [{
province: '河南省',
city: [{
province: '郑州市',
area: ['金水区', '中原区']
},
{
province: '濮阳市',
area: ['台前县', '清丰县']
}
]
},
{
province: '河北省',
city: [{
province: '邯郸市',
area: ['丛台区', '邯山区']
},
{
province: '邢台市',
area: ['桥东区','桥西区"']
}
]
}
];
</script>
</head>
<body>
<div>
<select id="cmbProvince"></select>省
<select id="cmbCity"></select>市:
<select id="cmbArea"></select>区:
<script type="text/javascript">
addressInit('cmbProvince', 'cmbCity', 'cmbArea');
</script>
</div>
</body>
</html

Comment list( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025