JS实现三级联动功能

<div id="page">
<select id="province">
</select>
</div>

<script type="text/javascript">
$(function () {
//数据源
var data = {
//省
data_province: {
"0": "北京省",
"1": "上海省",
"2": "浙江省"
},
//市
data_city: {
"0": [{ value: '0', name: "北京市"}],
"1": [{ value: '0', name: "上海市"}],
"2": [{ value: '0', name: "宁波市" }, { value: '1', name: "杭州市" }, { value: '2', name: "温州市"}]
},
//地区
data_area: {
'00': [{ value: "0", name: "北京1区" }, { value: "1", name: "北京2区" }, { value: "2", name: "北京3区"}],
'10': [{ value: "0", name: "上海1区" }, { value: "1", name: "上海2区" }, { value: "2", name: "上海3区"}],
'20': [{ value: "0", name: "宁波1区" }, { value: "1", name: "宁波2区" }, { value: "2", name: "宁波3区"}],
'21': [{ value: "0", name: "杭州1区" }, { value: "1", name: "杭州2区" }, { value: "2", name: "杭州3区"}]
}
}

//.
var _p = $('#province'),
sel_city, sel_area;

var dropDown = {
init: function (type, key) {
this.html('');
this.append('<option value="-1">请选择</option>');
if (key > -1) {
var d = data[type][key];
for (var i = 0; i < d.length; i++) {
this.append('<option value="' + d[i].value + '">' + d[i].name + '</option>');
}
}
}
}

//省
_p.append('<option value="-1">请选择</option>');
for (var i in data.data_province) {
_p.append('<option value="' + i + '">' + data.data_province[i] + '</option>');
}
//
$('#page').on('change', '#province', function () {
var _key = $(this).val();
if (!sel_city) {
sel_city = $('<select id="city"></select>');
_p.after(sel_city);
}
dropDown.init.call(sel_city, "data_city", _key);
})
//
$('#page').on('change', '#city', function () {
var _key = _p.val() + $(this).val();
if (!sel_area) {
sel_area = $('<select id="area"></select>');
sel_city.after(sel_area);
}
dropDown.init.call(sel_area, "data_area", _key);
})

});
</script>