html - JSON での郵送先住所と電話番号の国固有のフォーム フィールド

Question

彼はすべて、JSON で郵送先住所と電話番号の国固有のフォーム フィールドを公開する最新のサイトがあるので、JSON を繰り返し、HTML を作成し、自分のサイトに住所と電話番号のフィールドを常に表示できますか? -現在まで？理想的には、適切なデータ構造を促進するために、各フィールドを各国の同様のフィールドにマッピングできます。

ありがとう！ブライアン

Answer 1

これがあなたが探しているものだと思いますhttp://weblogs.asp.net/awilinsk/archive/2009/08/13/jquery-amp-international-address-data-collecting-and-storing.aspx

上記のソースから取得：

(function($) {
    var _fields = {
        address1: { id: "address1", name: "address1" },
        address2: { id: "address2", name: "address2" },
        address3: { id: "address3", name: "address3" },
        locality: { id: "locality", name: "locality" },
        region: { id: "region", name: "region" },
        postCode: { id: "postCode", name: "postCode" }
    };
    var _labels = {
        address1: "Address:",
        address2: "",
        address3: "",
        area: "Area:",
        city: "City:",
        county: "County:",
        department: "Department:",
        district: "District:",
        emirate: "Emirate:",
        island: "Island:",
        locality: "City/Town:",
        metroProvince: "Metro/Province:",
        region: "State/Province/Region:",
        postalCode: "Postal Code:",
        postCode: "Zip/Postal Code:",
        prefecture: "Prefecture:",
        province: "Province:",
        state: "State:",
        zip: "Zip:"
    };
    var _layouts = {};
    var _templates = {
        text: function(data) {
            return "<label for=\"" + data.id + "\">" + data.label + "</label><input id=\"" + data.id + "\" name=\"" + data.name + "\" type=\"text\"/>";
        },
        select: function(data) {
            var html = "<label for=\"" + data.id + "\">" + data.label + "</label><select id=\"" + data.id + "\" name=\"" + data.name + "\" disabled=\"disabled\"><option selected=\"selected\">Loading...</option></select>";
            data.source(function(regions) {
                var html2 = "";
                $.each(regions, function(i, item) {
                    html2 += "<option value=\"" + item.value + "\">" + item.text + "</option>";
                });
                $("#" + data.id).removeAttr("disabled").html(html2);
            });
            return html;
        }
    };
    var _defaultLayout = [
        { fieldName: "address1", templateName: "text", labelName: "address1" },
        { fieldName: "address2", templateName: "text", labelName: "address2" },
        { fieldName: "address3", templateName: "text", labelName: "address3" },
        { fieldName: "locality", templateName: "text", labelName: "locality" },
        { fieldName: "region", templateName: "text", labelName: "region" },
        { fieldName: "postCode", templateName: "text", labelName: "postCode" }
    ];
    $.fn.globalAddress = function(countrySelect, settings) {
        settings = $.extend(true, {}, {
            labels: _labels,
            fields: _fields,
            templates: _templates
        }, settings);
        var addressContainer = $(this);
        $(countrySelect).change(function(e) {
            var country = $(this).val();
            var layout = _layouts[country] ? _layouts[country] : _defaultLayout;
            var html = "";
            $.each(layout, function(i, l) {
                var data = $.extend(true, { label: _labels[l.labelName] }, settings.fields[l.fieldName], l.data);
                html += settings.templates[l.templateName](data);
            });
            $(addressContainer).html($(html));
        }).trigger("change");
        return this;
    };
    $.globalAddressExtend = function(key, layout) {
        _layouts[key] = layout;
    };
})(jQuery)

使用法：

(function($) {
    $.globalAddressExtend("US", [
        { fieldName: "address1", templateName: "text", labelName: "address1" },
        { fieldName: "address2", templateName: "text", labelName: "address2" },
        { fieldName: "address3", templateName: "text", labelName: "address3" },
        { fieldName: "locality", templateName: "text", labelName: "city" },
        { fieldName: "region", templateName: "text", labelName: "state", source: function(callback) {
            //get data here and call the callback function
        } },
        { fieldName: "postCode", templateName: "text", labelName: "zip" }
    ]);
    $.globalAddressExtend("CA", [
        { fieldName: "address1", templateName: "text", labelName: "address1" },
        { fieldName: "address2", templateName: "text", labelName: "address2" },
        { fieldName: "address3", templateName: "text", labelName: "address3" },
        { fieldName: "locality", templateName: "text", labelName: "city" },
        { fieldName: "region", templateName: "text", labelName: "province", source: function(callback) {
            //get data here and call the callback function
        } },
        { fieldName: "postCode", templateName: "text", labelName: "postalCode" }
    ]);
});