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);