公式サイト
郵便番号・住所サジェスト システム - サンプル 03
このサンプルは、
複数の入出力への対応、
出力の都道府県はセレクトボックス
のパターン例です。
入力例
100-0012 (東京都), 170-0014 (東京都), 190-1222 (東京都)
001-0040 (北海道), 093-0088 (北海道), 048-1511 (北海道)
ハイフンは省くこともできます。
ソースコード (クリックで開きます)
<head>
:
<script src="./../dist/p2as.js"></script>
<!-- p2as.js ファイルを指定して下さい。パスは環境によって異なります -->
:
</head>
<body>
:
<form>
<div data-p2as="set">
<!-- 入出力一つのセット毎に data-p2as="set" 属性を設定 -->
<p>郵便番号：<input type="text" data-p2as="postcode"></p>
<p>都道府県：<select data-p2as="prefecture"><option value="-">－</option><option value="01">北海道</option><option value="02">青森県</option><option value="03">岩手県</option><option value="04">宮城県</option><option value="05">秋田県</option><option value="06">山形県</option><option value="07">福島県</option><option value="08">茨城県</option><option value="09">栃木県</option><option value="10">群馬県</option><option value="11">埼玉県</option><option value="12">千葉県</option><option value="13">東京都</option><option value="14">神奈川県</option><option value="15">新潟県</option><option value="16">富山県</option><option value="17">石川県</option><option value="18">福井県</option><option value="19">山梨県</option><option value="20">長野県</option><option value="21">岐阜県</option><option value="22">静岡県</option><option value="23">愛知県</option><option value="24">三重県</option><option value="25">滋賀県</option><option value="26">京都府</option><option value="27">大阪府</option><option value="28">兵庫県</option><option value="29">奈良県</option><option value="30">和歌山県</option><option value="31">鳥取県</option><option value="32">島根県</option><option value="33">岡山県</option><option value="34">広島県</option><option value="35">山口県</option><option value="36">徳島県</option><option value="37">香川県</option><option value="38">愛媛県</option><option value="39">高知県</option><option value="40">福岡県</option><option value="41">佐賀県</option><option value="42">長崎県</option><option value="43">熊本県</option><option value="44">大分県</option><option value="45">宮崎県</option><option value="46">鹿児島県</option><option value="47">沖縄県</option></select></p>
<!-- 都道府県を出力するフィールドに data-p2as="prefecture" 属性を指定 -->
<!-- option要素の value属性値はここでは都道府県番号 -->
<p>市区町村：<input type="text" data-p2as="address" style="width: 420px;"></p>
</div>
<br>
<div data-p2as="set">
<p>郵便番号：<input type="text" data-p2as="postcode"></p>
<p>都道府県：<select data-p2as="prefecture"><option value="-">－</option><option value="北海道">北海道</option><option value="青森県">青森県</option><option value="岩手県">岩手県</option><option value="宮城県">宮城県</option><option value="秋田県">秋田県</option><option value="山形県">山形県</option><option value="福島県">福島県</option><option value="茨城県">茨城県</option><option value="栃木県">栃木県</option><option value="群馬県">群馬県</option><option value="埼玉県">埼玉県</option><option value="千葉県">千葉県</option><option value="東京都">東京都</option><option value="神奈川県">神奈川県</option><option value="新潟県">新潟県</option><option value="富山県">富山県</option><option value="石川県">石川県</option><option value="福井県">福井県</option><option value="山梨県">山梨県</option><option value="長野県">長野県</option><option value="岐阜県">岐阜県</option><option value="静岡県">静岡県</option><option value="愛知県">愛知県</option><option value="三重県">三重県</option><option value="滋賀県">滋賀県</option><option value="京都府">京都府</option><option value="大阪府">大阪府</option><option value="兵庫県">兵庫県</option><option value="奈良県">奈良県</option><option value="和歌山県">和歌山県</option><option value="鳥取県">鳥取県</option><option value="島根県">島根県</option><option value="岡山県">岡山県</option><option value="広島県">広島県</option><option value="山口県">山口県</option><option value="徳島県">徳島県</option><option value="香川県">香川県</option><option value="愛媛県">愛媛県</option><option value="高知県">高知県</option><option value="福岡県">福岡県</option><option value="佐賀県">佐賀県</option><option value="長崎県">長崎県</option><option value="熊本県">熊本県</option><option value="大分県">大分県</option><option value="宮崎県">宮崎県</option><option value="鹿児島県">鹿児島県</option><option value="沖縄県">沖縄県</option></select></p>
<!-- option要素の value属性値はここでは都道府県名 -->
<p>市区町村：<input type="text" data-p2as="address" style="width: 420px;"></p>
</div>
<p><input type="reset" value="リセット"></p>
</form>
<form data-p2as="set">
<!-- 同一フォーム内でなくても指定可能 -->
<p>郵便番号：<input type="text" data-p2as="postcode"> - <input type="text" data-p2as="postcode"></p>
<p>都道府県：<select data-p2as="prefecture"><option value="-">－</option><option value="1">北海道</option><option value="青森">青森県</option><option value="3">岩手県</option><option value="宮城">宮城県</option><option value="5">秋田県</option><option value="山形">山形県</option><option value="7">福島県</option><option value="茨城">茨城県</option><option value="9">栃木県</option><option value="群馬">群馬県</option><option value="11">埼玉県</option><option value="千葉">千葉県</option><option value="13">東京都</option><option value="神奈川">神奈川県</option><option value="15">新潟県</option><option value="富山">富山県</option><option value="17">石川県</option><option value="福井">福井県</option><option value="19">山梨県</option><option value="長野">長野県</option><option value="21">岐阜県</option><option value="静岡">静岡県</option><option value="23">愛知県</option><option value="三重">三重県</option><option value="25">滋賀県</option><option value="京都">京都府</option><option value="27">大阪府</option><option value="兵庫">兵庫県</option><option value="29">奈良県</option><option value="和歌山">和歌山県</option><option value="31">鳥取県</option><option value="島根">島根県</option><option value="33">岡山県</option><option value="広島">広島県</option><option value="35">山口県</option><option value="徳島">徳島県</option><option value="37">香川県</option><option value="愛媛">愛媛県</option><option value="39">高知県</option><option value="福岡">福岡県</option><option value="41">佐賀県</option><option value="長崎">長崎県</option><option value="43">熊本県</option><option value="大分">大分県</option><option value="45">宮崎県</option><option value="鹿児島">鹿児島県</option><option value="47">沖縄県</option></select></p>
<!-- option要素の value属性値は都道府県番号の先頭の "0"、都道府県名の末尾の "都", "道", "府", "県" は省略可 -->
<p>市区町村：<input type="text" data-p2as="address" style="width: 420px;"></p>
<p><input type="reset" value="リセット"></p>
</form>
:
</body>