通过数组来实现省市县三级联动。
省一级数组
市二级数组
县三级数组
js代码如下:
var provinces =['山西','山东','河南','河北'];
var cities = [
['太原','晋中','大同','阳泉'],
['济南','青岛','威海'],
['郑州','洛阳'],
['石家庄','保定']
];
var areas = [
[
['小店','迎泽','杏花岭','尖草坪'],
['榆次','左权','寿阳'],
['左云'],
['平定','盂县']
],
[
['历下','天桥'],
['黄岛','崂山'],
['环翠','文登'],
],
[
['中原','二七'],
['老城','西工'],
],
[
['长安','新华'],
['竞秀','莲池'],
],
]
<script type="text/javascript">
$(function(){
//遍历数组,给#province下拉框中追加省
$(provinces).each(function(i,o){
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#province').append(str);
});
//当#province改变时,触发函数
$('#province').on('change',function(){
//得到选择的省的下标
pIndex = $('#province').find(':selected').attr('value');
//清除之前(给市下拉框)追加的,并追加“请选择”选项
$('#city').empty().append("<option value=\"\">请选择</option>");
//清除之前(给县下拉框)追加的,并追加“请选择”选项
$('#area').empty().append("<option value=\"\">请选择</option>");
//遍历数组往#city的下拉框中添加对应的市
$(cities[pIndex]).each(function(i,o){
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#city').append(str);
});
})
//当#city改变时,触发函数
$('#city').on('change',function(){
//得到选择的市的下标
cIndex = $('#city').find(':selected').attr('value');
//清除之前(县)追加的,并追加“请选择”选项
$('#area').empty().append("<option value=\"\">请选择</option>");
//遍历数组往#city的下拉框中添加对应的县
$(areas[pIndex][cIndex]).each(function(i,o){
var str = "<option value=\""+i+"\">"+o+"</option>";
$('#area').append(str);
});
});
});
</script>
body里的内容:
<select name="" id="province">
<option value="">请选择</option>
</select>省
<select name="" id="city">
<option value="">请选择</option>
</select>市
<select name="" id="area">
<option value="">请选择</option>
</select>县