https://www.jcom.co.jp/sim_contact/subscription/js/area_select_sp.js

1$(document).ready(function () {
2  //エリア選択切り替え用
3  $('#addSelect').hide();
4  //住所から選ぶ切り替え用
5  $('#addSelect .addSelect2').hide();
6  $('#addSelect .addSelect3').hide();
7  $('#addSelect .addSelect4').hide();
8  $('#addSelect .addSelect5').hide();
9
10  // 都道府県から検索　に表示切り替え
11  $('.areaSelectLink.pc_hide a').on('click', function () {
12    $('#postal_code_area').hide();
13
14    $('#addSelect .now_select').hide();
15    $('#addSelect .addSelect2').hide();
16    $('#addSelect .addSelect3').hide();
17    $('#addSelect .addSelect4').hide();
18    $('#addSelect .addSelect5').hide();
19    $('#addSelect .addSelect1').fadeIn();
20    $('#addSelect').fadeIn();
21
22    $('input[name=postalcode1]').val('');
23    $('input[name=postalcode2]').val('');
24    $('input[name=current_pref]').val('');
25    $('input[name=current_city]').val('');
26    $('input[name=current_area]').val('');
27
28    $('.errBox').fadeOut('fast');
29    checkSubmitButton();
30  });
31
32  // 郵便番号からエリアを選択する
33  $('#postcodeInput .change').on('click', function () {
34    $('#addSelect').fadeIn();
35    $('#addSelect .addSelect1').fadeIn();
36    $('#postcodeInput').hide();
37    $(document).trigger('hidePostalcodeInput', [this]);
38    $(document).trigger('showAddrSelect', [this]);
39    $(document).trigger('showPrefSelect', [this]);
40
41    $('.errBox').fadeOut('fast');
42    checkSubmitButton();
43  });
44  // 都道府県選択
45  $('#addSelect .addSelect2 .return').on('click', function () {
46    $('#addSelect .addSelect2').hide();
47    $('#addSelect .addSelect3').hide();
48    $('#addSelect .addSelect4').hide();
49    $('#addSelect .addSelect5').hide();
50    $('#addSelect .now_select').hide();
51
52    $('#addSelect .addSelect1').fadeIn();
53  });
54
55  // 市区町村選択
56  $('#addSelect .addSelect3 .return').on('click', function () {
57    $('#addSelect .addSelect1').hide();
58    $('#addSelect .addSelect3').hide();
59    $('#addSelect .addSelect4').hide();
60    $('#addSelect .addSelect5').hide();
61
62    $('#addSelect .addSelect2').fadeIn();
63    $(document).trigger('hideAreaInitialSelect', [this]);
64    $(document).trigger('showCitySelect', [this]);
65  });
66
67  $('#addSelect .addSelect1 .selectList a').on('click', function () {
68    $('#addSelect .addSelect1').hide();
69    $('#addSelect .addSelect2').fadeIn();
70    $('#addSelect .now_select').fadeIn();
71    $(document).trigger('hidePrefSelect', [this]);
72    $(document).trigger('showCitySelect', [this]);
73  });
74  $('#addSelect .addSelect2').on('click', '.selectList .citySelect a', function () {
75    $('#addSelect .addSelect2').hide();
76    $('#addSelect .addSelect3').fadeIn();
77    $(document).trigger('hideCitySelect', [this]);
78    $(document).trigger('showAreaInitialSelect', [this]);
79  });
80  $('#addSelect .addSelect3').on('click', '.selectList a', function () {});
81  // $("#addSelect .addSelect4").on("click", '.selectList a', function() {
82  // 	$("#addSelect .addSelect5").fadeIn();
83  // 	$("#addSelect .addSelect4").fadeOut();
84  // 	$(document).trigger("hideAreaSelect",[this]);
85  // 	$(document).trigger("showSelectedArea",[this]);
86  // });
87  // $("#addSelect .addSelect2 .return").on("click", function() {
88  //   $("#addSelect .addSelect2").hide();
89  //   $("#addSelect .addSelect1").fadeIn();
90  //   $(document).trigger("hideCitySelect",[this]);
91  //   $(document).trigger("showPrefSelect",[this]);
92  // });
93  // $("#addSelect .addSelect3 .return").on("click", function() {
94  //   $("#addSelect .addSelect3").hide();
95  //   $("#addSelect .addSelect2").fadeIn();
96  //   $(document).trigger("hideAreaInitialSelect",[this]);
97  //   $(document).trigger("showCitySelect",[this]);
98  // });
99  // $("#addSelect .addSelect4 .return").on("click", function() {
100  //   $("#addSelect .addSelect4").hide();
101  //   $("#addSelect .addSelect3").fadeIn();
102  //   $(document).trigger("hideAreaSelect",[this]);
103  //   $(document).trigger("showAreaInitialSelect",[this]);
104  // });
105  // $("#addSelect .addSelect5").on("click", '.return', function() {
106  //   $("#addSelect .now_select").hide();
107  //   $("#addSelect .addSelect5").hide();
108  //   $("#addSelect .addSelect1").fadeIn();
109  //   $(document).trigger("hideSelectedArea",[this]);
110  //   $(document).trigger("showPrefSelect",[this]);
111  // });
112
113  var sel = {
114    pc1: $('input[name=postalcode1]'),
115    pc2: $('input[name=postalcode2]'),
116    zcid: $('input[name=zipcode_id]'),
117    p: $('input[name=current_pref]'),
118    c: $('input[name=current_city]'),
119    a: $('input[name=current_area]'),
120    currentArea: $('dl.now_select')
121  };
122
123  // 郵便番号入力がshowされた時
124  $(document).on('showPostalcodeInput', function (e, clickeditem) {
125    sel.pc1.val('');
126    sel.pc2.val('');
127    sel.p.val('');
128    sel.c.val('');
129    sel.a.val('');
130    sel.zcid.val('');
131    checkSubmitButton();
132  });
133  // 郵便番号入力がhideされた時
134  $(document).on('hidePostalcodeInput', function (e, clickeditem) {});
135  // 住所選択がshowされた時
136  $(document).on('showAddrSelect', function (e, clickeditem) {
137    sel.pc1.val('');
138    sel.pc2.val('');
139    sel.p.val('');
140    sel.c.val('');
141    sel.a.val('');
142    sel.zcid.val('');
143  });
144  // 住所選択がhideされた時
145  $(document).on('hideAddrSelect', function (e, clickeditem) {});
146  // 住所選択の都道府県選択がshowされた時
147  $(document).on('showPrefSelect', function (e, clickeditem) {
148    // 都道府県以下の選択情報をリセット
149    $('#area_simulator0101 .area01list li').removeClass('active');
150    sel.p.val('');
151    sel.c.val('');
152    sel.a.val('');
153    sel.zcid.val('');
154    sel.currentArea.trigger('refresh');
155  });
156  // 住所選択の都道府県選択がhideされた時
157  $(document).on('hidePrefSelect', function (e, clickeditem) {
158    sel.p.val($(clickeditem).text());
159    sel.currentArea.trigger('refresh');
160
161    $(clickeditem).trigger('pref_selected');
162  });
163  // 住所選択の市区町村選択がshowされた時
164  $(document).on('showCitySelect', function (e, clickeditem) {
165    sel.c.val('');
166    sel.a.val('');
167    sel.zcid.val('');
168
169    sel.currentArea.trigger('refresh');
170  });
171  // 住所選択の市区町村選択がhideされた時
172  $(document).on('hideCitySelect', function (e, clickeditem) {
173    sel.c.val($(clickeditem).text());
174    sel.currentArea.trigger('refresh');
175
176    $(clickeditem).trigger('city_selected');
177  });
178  // 住所選択の市区町村イニシャル選択がshowされた時
179  $(document).on('showAreaInitialSelect', function (e, clickeditem) {
180    sel.a.val('');
181    sel.zcid.val('');
182    sel.currentArea.trigger('refresh');
183  });
184  // 住所選択の市区町村イニシャル選択がhideされた時
185  $(document).on('hideAreaInitialSelect', function (e, clickeditem) {
186    sel.a.val($(clickeditem).text());
187    sel.currentArea.trigger('refresh');
188  });
189  // 住所選択の市区町村選択がshowされた時
190  $(document).on('showAreaSelect', function (e, clickeditem) {
191    sel.a.val('');
192    sel.zcid.val('');
193    sel.currentArea.trigger('refresh');
194  });
195  // 住所選択の市区町村選択がhideされた時
196  $(document).on('hideAreaSelect', function (e, clickeditem) {
197    sel.a.val($(clickeditem).text());
198    sel.currentArea.trigger('refresh');
199  });
200
201  // 住所選択済み画面がshowされた時
202  $(document).on('showSelectedArea', function (e, clickeditem) {
203    var current_pref = sel.p.val();
204    var current_city = sel.c.val();
205
206    var id = parseInt($(clickeditem).parent('li').attr('id').substring(4));
207    var listdata = ApiCache[current_pref][current_city]['id_map'];
208    if (listdata[id]) {
209      sel.pc1.val(listdata[id].zipcode.substr(0, 3));
210      sel.pc2.val(listdata[id].zipcode.substr(3, 4));
211      sel.zcid.val(id);
212    }
213    sel.currentArea.trigger('refresh');
214    checkSubmitButton();
215  });
216  // 住所選択済み画面がhideされた時
217  $(document).on('hideSelectedArea', function (e, clickeditem) {});
218
219  // 初期は郵便番号入力なので一応一度トリガーを引いておく
220  // $(document).trigger("showPostalcodeInput");
221
222  sel.currentArea.on('refresh', function () {
223    $(this).html('<dt>現在の選択：</dt><dd>' + sel.p.val() + sel.c.val() + sel.a.val() + '</dd>');
224    return false;

225  });
226
227  $(document).on('refresh', '.addSelect2', function (event, data, list_closure) {
228    var areaselectBox = $(this).find('.selectList').html('');
229    var isFirstItem = true;
230    // for ( var k in data) {
231    //   for ( var i in data[k]) {
232    //     list_closure(data[k][i]).appendTo(areaselectBox);
233    //   }
234    // }
235    for (var k in data) {
236      var a = $('<a href="javascript:;" class="acdBtn" data-ref="' + k + '">「' + k + '」行から始まる地域</a>').click(function () {
237        // トグル表示
238        $(this).parent('li').next('ul').slideToggle();
239        var span = $(this).next('span');
240        if (span.hasClass('acdOpen')) {
241          span.addClass('acdClose');
242          span.removeClass('acdOpen');
243        } else {
244          span.addClass('acdOpen');
245          span.removeClass('acdClose');
246        }
247      });
248      var span = $('<span class="acdOpen"></span>');
249      $('<li />').append(a).append(span).appendTo(areaselectBox);
250
251      // 各行の地域要素
252      var ul = $('<ul style="display:none;"/>').appendTo(areaselectBox);
253      for (var i in data[k]) {
254        var li = list_closure(data[k][i]);
255        li.addClass('citySelect').appendTo(ul);
256        // li.find("a").click(function() {
257        //   $("#addSelect .addSelect3").hide();
258        //   $("#addSelect .addSelect5").fadeIn();
259        //   $(document).trigger("hideAreaSelect",[this]);
260        //   $(document).trigger("showSelectedArea",[this]);
261        // });
262      }
263    }
264    return false;
265  });
266
267  $(document).on('refresh', '.addSelect3', function (event, data, list_closure) {
268    var list3 = $('.addSelect3').find('.selectList').html('');
269    var isFirstItem = true;
270    for (var k in data) {
271      var a = $('<a href="javascript:;" class="acdBtn" data-ref="' + k + '">「' + k + '」行から始まる地域</a>').click(function () {
272        // トグル表示
273        $(this).parent('li').next('ul').slideToggle();
274        var span = $(this).next('span');
275        if (span.hasClass('acdOpen')) {
276          span.addClass('acdClose');
277          span.removeClass('acdOpen');
278        } else {
279          span.addClass('acdOpen');
280          span.removeClass('acdClose');
281        }
282      });
283      var span = $('<span class="acdOpen"></span>');
284      $('<li />').append(a).append(span).appendTo(list3);
285
286      // 各行の地域要素
287      var ul = $('<ul style="display:none;"/>').appendTo(list3);
288      for (var i in data[k]) {
289        var li = list_closure(data[k][i]);
290        li.addClass('addSelect4').appendTo(ul);
291        li.find('a').click(function () {
292          $('#addSelect').hide();
293          //住所から選ぶ切り替え用
294          $('#addSelect .addSelect2').hide();
295          $('#addSelect .addSelect3').hide();
296          $('#addSelect .addSelect4').hide();
297          $('#addSelect .addSelect5').hide();
298
299          $('#postal_code_area').fadeIn();
300          $(document).trigger('hideAreaSelect', [this]);
301          $(document).trigger('showSelectedArea', [this]);
302        });
303      }
304    }
305    return false;
306  });
307
308  $('.addSelect1').on('pref_selected', 'li a', function () {
309    var current_pref = sel.p.val();
310    var url = API.API_BASE_URL + 'get_city_list.php';
311    if (ApiCache[current_pref] != undefined) {
312      $('.addSelect2').trigger('refresh', [
313        ApiCache[current_pref]['list'],
314        function (data) {
315          return $('<li id=""><a href="#">' + data['area'] + '</a></li>');
316        }
317      ]);
318    } else {
319      ApiCache[current_pref] = {};
320      $.getJSON(
321        url,
322        {
323          pref: current_pref
324        },
325        function (json, status) {
326          ApiCache[current_pref]['list'] = json.data;
327          $('.addSelect2').trigger('refresh', [
328            ApiCache[current_pref]['list'],
329            function (data) {
330              return $('<li id=""><a href="#">' + data['area'] + '</a></li>');
331            }
332          ]);
333        }
334      ).fail(function (jqXHR, textStatus, errorThrown) {
335        var path = url.split('/');
336        console.log('Connection Error:[URL]' + path[path.length - 1]);
337        throw '接続に失敗しました。';
338      });
339    }
340    return false;

341  });
342
343  $('.addSelect2').on('city_selected', 'li.citySelect a', function () {
344    var current_pref = sel.p.val();
345    var current_city = sel.c.val();
346    var url = API.API_BASE_URL + 'get_area_list.php';
347    if (ApiCache[current_pref] == undefined) {
348      ApiCache[current_pref] = {};
349    }
350    if (ApiCache[current_pref][current_city] != undefined) {
351      $('.addSelect3').trigger('refresh', [
352        ApiCache[current_pref][current_city]['list'],
353        function (data) {
354          return $('<li id="zcid' + data['zipcode_id'] + '"><a href="javascript:;">' + data['quarter'] + '</a></li>');
355        }
356      ]);
357    } else {
358      ApiCache[current_pref][current_city] = {};
359      $.getJSON(
360        url,
361        {
362          city: current_city
363        },
364        function (json, status) {
365          ApiCache[current_pref][current_city]['list'] = json.data;
366          ApiCache[current_pref][current_city]['id_map'] = {};
367          $('.addSelect3').trigger('refresh', [
368            ApiCache[current_pref][current_city]['list'],
369            function (data) {
370              ApiCache[current_pref][current_city]['id_map'][data['zipcode_id']] = data;
371              return $('<li id="zcid' + data['zipcode_id'] + '"><a href="javascript:;">' + data['quarter'] + '</a></li>');
372            }
373          ]);
374        }
375      ).fail(function (jqXHR, textStatus, errorThrown) {
376        var path = url.split('/');
377        console.log('Connection Error:[URL]' + path[path.length - 1]);
378        throw '接続に失敗しました。';
379      });
380    }
381    return false;
382  });
383});