jq实现地址级联效果

(function ($) {
$.fn.Address = function (options) {
var defaults = {
divid: "Address",
callback: function (pageindex) {
}
};
var opts = $.extend(defaults, options);
var AddressHtml = "";
AddressHtml = ("<span class=\"province\" ><select id=\"Pro\" name=\"Region_Province\"></select></span>" +
"" + "<span class=\"province\" ><select id=\"city\" name=\"Region_City\"><option>地级市</option></select></span>" +
"" + "<span class=\"province\"><select  id=\"area\" name=\"Region_Xian\"><option >市县级市</option></select></span>" +
"" + "<span class=\"fillin\"><input type=\"text\" id=\"addressdetial\" name=\"Region_Detail\"></span>" +
"" + "<span id=\"addressdetialSpan\"  style=\"padding-left:10px;padding-top:3px;\"></span>");
$("#" + opts.divid).html(AddressHtml);
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/read",
dataType: "json",
success: function (data) {
var html = "<option value='0'>省份</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#Pro").html(html);
}
});
$("#Pro").change(function () {
var code = $("#Pro").find("option:selected").val();
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/ReadSecond",
dataType: "json",
data: { parentId: code, level: 2 },
success: function (data) {
var html = "<option value='0'>地级市</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#city").html(html);
$("#area").html("<option value='0'>市县级市</option>");
}
});
});
$("#city").change(function () {
var code = $("#city").find("option:selected").val();
$.ajax({
type: "get",
contentType: 'text/json',
url: "/common/ReadSecond",
dataType: "json",
data: { parentId: code, level: 3 },
success: function (data) {
var html = "<option value='0'>市县级市</option>";
$.each(data, function (i, dataitem) {
html = html + "<option value='" + dataitem.Code + "'>" + dataitem.Name + "</option>";
});
$("#area").html(html);
}
});
});

};

})(jQuery);