码迷,mamicode.com
首页 > 其他好文 > 详细

jq实现地址级联效果

时间:2015-05-19 18:22:10      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

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

  

jq实现地址级联效果

标签:

原文地址:http://www.cnblogs.com/liuchang/p/4514811.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!