转:JQuery实现下拉框的数据加载和联动

时间:2022-11-21 19:48:17
<script type="text/javascript">
$(document).ready(
function() {
GetByJquery();
$(
"#ddlProvince").change(function() { GetCity() });
$(
"#ddlCity").change(function() { GetDistrict() });
});

function GetByJquery() {

$(
"#ddlProvince").empty(); //清空省份SELECT控件

$.getJSON(
"/ajax/GetProvinceList", function(data) {
$.each(data,
function(i, item) {
$(
"<option></option>")
.val(item[
"ProvinceID"])
.text(item[
"ProvinceName"])
.appendTo($(
"#ddlProvince"));
});
GetCity();
});

}

function GetCity() {

$(
"#ddlCity").empty(); //清空城市SELECT控件
var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url,
function(data) {
$.each(data,
function(i, item) {
$(
"<option></option>")
.val(item[
"CityID"])
.text(item[
"CityName"])
.appendTo($(
"#ddlCity"));
});
GetDistrict();
});
}

function GetDistrict() {
$(
"#ddlDistrict").empty(); //清空市区SELECT控件
var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();

$.getJSON(url,
function(data) {
$.each(data,
function(i, item) {
$(
"<option></option>")
.val(item[
"DistrictID"])
.text(item[
"DistrictName"])
.appendTo($(
"#ddlDistrict"));
});
});
}

</script>

<table>
<tr>
<td><select id="ddlProvince"/></td>
<td><select id="ddlCity"/></td>
<td><select id="ddlDistrict" /></td>
</tr>
</table>

转自:http://group.cnblogs.com/topic/9741.html