https://kuramore.jp/sell/js/components/dropdown.js

1import * as api from '../../../trend/js/components/api.js';
2
3/**
4 * 市区町村のドロップダウンリストを生成する
5 * @param {string} prefCd 都道府県コード
6 * @param {object} ulElement プルダウンのul要素
7 */
8export const generateCityList = async (prefCd, ulElement) => {
9  const cityData = await api.fetchCityData(prefCd);
10  generateDropdownList(cityData, 'bukkenCityCd', ulElement);
11}
12
13/**
14 * 大字・通称のドロップダウンリストを生成する
15 * @param {string} prefCd 都道府県コード
16 * @param {string} cityCd 市区町村コード
17 * @param {object} ulElement プルダウンのul要素
18 */
19export const generateTownList = async (prefCd, cityCd, ulElement) => {
20  const townData = await api.fetchTownData(prefCd, cityCd);
21  generateDropdownList(townData, 'bukkenTownCd', ulElement);
22}
23
24/**
25 * 字・丁目のドロップダウンリストを生成する
26 * @param {string} prefCd 都道府県コード
27 * @param {string} cityCd 市区町村コード
28 * @param {string} townCd 町名コード
29 * @param {object} ulElement プルダウンのul要素
30 */
31export const generateChomeList = async (prefCd, cityCd, townCd, ulElement) => {
32  const chomeData = await api.fetchChomeData(prefCd, cityCd, townCd);
33  generateDropdownList(chomeData, 'bukkenChomeCd', ulElement);
34}
35
36/**
37 * APIで取得した住所情報を元にドロップダウンリストを生成する
38 * @param {object} target 市区町村情報 || 大字・通称情報 || 丁目情報
39 * @param {string} category bukkenCityCd || bukkenTownCd || bukkenChomeCd
40 * @param {object} ulElement プルダウンのul要素
41 */
42function generateDropdownList(target, category, ulElement) {
43  ulElement.innerHTML = '';
44
45  if (category === 'bukkenCityCd' || category === 'bukkenTownCd') {
46    Object.keys(target).forEach(listHeader => {
47      // li要素を作成
48      const dataList = document.createElement('li');
49      dataList.classList.add('data-list');
50
51      // p要素を作成してli要素に追加
52      const listName = document.createElement('p');
53      listName.classList.add('list-name', 'catch');
54      listName.textContent = listHeader;
55      dataList.appendChild(listName);
56
57      // ul要素を作成
58      const targetList = target[listHeader];
59      var innerList = '';
60      switch (category) {
61        case 'bukkenCityCd':
62          innerList = generateUlElementCity(targetList);
63          break;
64        case 'bukkenTownCd':
65          innerList = generateUlElementTown(targetList);
66          break;
67      }
68
69      // li要素にul要素を追加
70      dataList.appendChild(innerList);
71
72      // 作成したリストを親要素に追加
73      ulElement.appendChild(dataList);
74    });
75  } else {
76    generateUlElementChome(target, ulElement);
77  }
78}
79
80/**
81 * 市区町村のUl要素を生成する
82 * @param {object} cities 市区町村リスト
83 * @return ul要素
84 */
85function generateUlElementCity(cities) {
86  const innerList = document.createElement('ul');
87  cities.forEach(city => {
88    const listItem = document.createElement('li');
89    listItem.setAttribute('data-value', city.cityCd);
90    listItem.textContent = city.cityName;
91    innerList.appendChild(listItem);
92  });
93
94  return innerList;
95}
96
97/**
98 * 大字・通称のUl要素を生成する
99 * @param {object} towns 大字・通称リスト
100 * @return ul要素
101 */
102function generateUlElementTown(towns) {
103  const innerList = document.createElement('ul');
104  towns.forEach(town => {
105    const listItem = document.createElement('li');
106    listItem.setAttribute('data-value', town.townCd);
107    listItem.textContent = town.townName == '' ? '町名なし' : town.townName;
108    innerList.appendChild(listItem);
109  });
110
111  return innerList;
112}
113
114/**
115 * 字・丁目のUl要素を生成する
116 * @param {object} chomes 字・丁目リスト
117 * @param {object} ulElement プルダウンのul要素
118 */
119function generateUlElementChome(chomes, ulElement) {
120  chomes.forEach(chome => {
121    const listItem = document.createElement('li');
122    listItem.setAttribute('data-value', chome.chomeCd);
123    listItem.textContent = chome.chomeName;
124    ulElement.appendChild(listItem);
125  });
126}