.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/area.js" type="text/javascript" charset="utf-8"></script>
<div>省市县三级联动</div>
<div id="luckyName">
<select id="provinceSelect">
<option value="0">选择</option>
</select>
<select id="citySelect" ">
<option value="0">选择</option>
</select>
<select id="countrySelect">
<option value="0">选择</option>
</select>
</div>
</body>
</html>
area.js
var p = [
{ pid: 1, name: '北京' },
{ pid: 2, name: '河南' },
{ pid: 3, name: '辽宁' }
]
var c = [
{ cid: 1, name: '北京' },
{ cid: 2, name: '安阳' },
{ cid: 3, name: '郑州' },
{ cid: 4, name: '林州' },
{ cid: 5, name: '大连' },
{ cid: 6, name: '沈阳' },
{ cid: 7, name: '丹东' }
]
var q = [
{ qid: 1, name: '朝阳区' },
{ qid: 2, name: '文峰区' },
{ qid: 3, name: '内黄县' },
{ qid: 4, name: '殷墟区' },
{ qid: 5, name: '开发区' },
{ qid: 6, name: '高新区' },
{ qid: 7, name: '沙河口' }
]
$(function() {
// 渲染省
var privince = [];
// $.ajax({
// url: 'KD002/search',
// type: 'get',
// dataType: "json",
// success: function(data) {
// if(data.stateCode == 0) {
// privince = p;
//// privince = data.appData;
// }
// },
// error: function() {
//
// }
// });
privince = p;
$.each(privince, function(i, val) {
console.log(val.pid + "####" + val.name);
$("#provinceSelect").append("<option value='" + val.pid + "'>" + val.name + "</option>");
});
//渲染市
$("#provinceSelect").change(function() {
var pid = $("#provinceSelect").val();
console.log(pid);
// $.ajax({
// type: "get",
// url: "",
// data: {
// "pid": pid
// },
// ssuccess: function(data) {
// if(data.stateCode == 0) {
// var city = c;
// $.each(city, function(i, val) {
// console.log(val.cid + "####" + val.name);
// $("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
// });
// }
// }
// });
var city = c;
$("#citySelect").empty();
$.each(city, function(i, val) {
console.log(val.cid + "####" + val.name);
$("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
});
});
$("#citySelect").change(function() {
var qid = $("#citySelect").val();
console.log(qid);
// $.ajax({
// type: "get",
// url: "",
// data: {
// "qid": qid
// },
// ssuccess: function(data) {
// if(data.stateCode == 0) {
// var city = c;
// $.each(city, function(i, val) {
// console.log(val.cid + "####" + val.name);
// $("#citySelect").append("<option value='" + val.cid + "'>" + val.name + "</option>");
// });
// }
// }
// });
var qu= q;
$("#countrySelect").empty();
$.each(qu, function(i, val) {
console.log(val.qid + "####" + val.name);
$("#countrySelect").append("<option value='" + val.qid + "'>" + val.name + "</option>");
});
});
})