给你一个例子，你看看
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: #242424
color: green
font-size: 20px
}
</style>
</head>
<body>
<select id="province" size="1" onchange="change(this.value)">
<option>请选择省份</option>
</select>
<select id="city" size="1" onchange="countyChange(this.value)">
<option>请选择地市</option>
</select>
<select id="county" size="1">
<option>请选择县城</option>
</select>
<script type="text/javascript">
var region = {
湖南:
{
"常德": ["石门", "桃源", "临澧", "汉寿"],
"益阳": ["益阳1", "益阳2", "益阳3"],
"岳阳": ["岳阳1", "岳阳2", "岳阳3", "岳阳4", "岳阳5", "岳阳6", "岳阳7"],
"永州": ["永州1", "永州2"],
"郴州": ["郴州1", "郴州2", "郴州3"],
"湘潭": ["湘潭1", "湘潭2", "湘潭3"]
},
广东:
{
"广州": ["广州1", "广州2", "广州3"],
"珠海": ["珠海1", "珠海2", "珠海3"],
"佛山": ["佛山1"]
}
}
var province = document.getElementById("province")
var city = document.getElementById("city")
var county = document.getElementById("county")
//二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值,
var provinceName = null
for (var ele in region) {
// text:字符串，指定option对象的text属性(即<option></option>之间的文字)
// value:字符串，指定option对象的value属性
// defaultSelected:布尔值，指定option对象的defaultSelected属性
// selected:布尔值，指定option对象的selected属性
var op = new Option(ele, ele, false, false)
province.options[province.length] = op
}
var change = function(src)
{
city.innerHTML = ""
for (index in region[src]) {
var op = new Option(index, index, false, false)
city.options[city.length] = op
}
//记住你选的省份的值是什么
provinceName = src
}
var countyChange = function(src2)
{
county.innerHTML = ""
//关键是如何表示:第三级县城的数据:??
for (index in region[provinceName][src2]) {
//alert(index)
var op = new Option(region[provinceName][src2][index], region[provinceName][src2][index], false, false)
county.options[county.length] = op
}
}
</script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function(argument) {
$('#box').toggle(500)
})
})
</script>
<script>
var Things = document.getElementsByTagName('*')
for (var i = 0 i < Things.length i++) {
Things[i].style.backgroundColor = '#242424'
Things[i].style.color = '#A57800'
}
</script>
</body>
</html>
<!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=0i<cmb.options.lengthi++)
{
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=0i<item.areaList.lengthi++)
{
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=0i<item.cityList.lengthi++)
{
cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i])
}
cmbSelect(cmbCity, defaultCity)
changeCity()
cmbCity.onchange = changeCity
}
for(var i=0i<provinceList.lengthi++)
{
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:['崇明县']}
]}
]
