zoukankan      html  css  js  c++  java
  • 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);
    

      

  • 相关阅读:
    Python中的try...except...finally
    JavaScript 实现双向队列并用此来测试一个单词是否为回文
    js 触发 change 事件
    MySQL8 重置改root密码及开放远程访问
    根据数组下标在MongoDB中修改数组元素
    pymongo CursorNotFound错误
    mongodb根据子项中的指标查找最小或最大值
    正则文本过滤时的一些注意事项
    github page更新后不生效
    Xpath同时选取不同属性的元素
  • 原文地址:https://www.cnblogs.com/liuchang/p/4514811.html
Copyright © 2011-2022 走看看