Question

你好 给我传一份ajax和jquery实现的省市县三级联动 谢谢

Answer 1

你都不留邮箱的,给你贴个js的代码吧

$(function() {
var url = APP_ROOT + "/getJsonCity.do";

$.post(url, "", function(data) {
//获取所有的国家信息
var countrys = data.countrys;
//选中ID为country的下拉选择框,然后清空
var $sel_country = $("#country");
$sel_country.empty();
//循环国家信息
$.each(countrys, function(index, value) {
//创建option标签
var $opt_country = $(document.createElement("option"));
//给option添加value属性,value值等于国家id
$opt_country.attr("value", value.csid);
//给option追加显示文本
$opt_country.append(value.csname);
//将option小节添加到select标签中
$sel_country.append($opt_country);
});
//如果得到的国家数量大于0,则默认选中第一个
if (countrys.length > 0) {
//添加属性，选中第一个
$sel_country.attr("selectedIndex", 0);
//添加改变事件触发器
$sel_country.trigger("change");
}
}, "json");

//国家选择框改变
$("#country").change(function() {
var $sel_province = $("#province");
$sel_province.empty();
var countryId = $(this).val();
//传递json对象参数
var param = {
"param" : "province",
"countryId" : countryId
};
//jquery形式的ajax请求
$.post(url, param, function(data) {
//异步请求得到的
var provinces = data.provinces;
$.each(provinces, function(pindex, pval) {
$opt_pro = $(document.createElement("option"));
$opt_pro.attr("value", pval.pid);
$opt_pro.append(pval.pname);
$sel_province.append($opt_pro);
});
if (provinces.length > 0) {
$sel_province.attr("selectedIndex", 0);
$sel_province.trigger("change");
}
}, "json");
});

//省份改变
$("#province").change(function() {
var $sel_city = $("#city");
$sel_city.empty();
var provinceId = $(this).val();
var param = {
"param" : "city",
"provinceId" : provinceId
};
$.post(url, param, function(data) {
var citys = data.citys;
$.each(citys, function(cindex, cval) {
$opt_city = $(document.createElement("option"));
$opt_city.attr("value", cval.cid);
$opt_city.append(cval.cname);
$sel_city.append($opt_city);
});
}, "json");
});
});