セレクトボックス 3 — 動的リスト生成

/* === 動的リスト生成 サンプル ===
   :root の変数を書き換えると色を一括変更できます */
:root {
  --color-accent:  #2B7FE8;
  --color-text:    #1A2332;
  --color-border:  #D0D7E0;
  --color-muted:   #9AA5B4;
  --color-bg:      #F4F6F9;
  --color-danger:  #E65100;
}
* { box-sizing: border-box; }
body { font-family: sans-serif; color: var(--color-text); padding: 24px; max-width: 600px; }

/* データセット切り替え */
.fs3-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.fs3-switcher-label { font-size: 13px; font-weight: 700; }
.fs3-switcher-btn {
  padding: 6px 14px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fs3-switcher-btn:hover { background: var(--color-bg); }
.fs3-switcher-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* パターン共通 */
.fs3-pattern { margin-bottom: 32px; }
.fs3-pattern-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* Pattern 1 */
.fs3-select-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.fs3-p1-row { display: flex; gap: 10px; align-items: center; }
.fs3-select {
  flex: 1;
  max-width: 280px;
  height: 40px;
  padding: 0 10px;
  font-size: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fs3-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* Pattern 2 */
.fs3-grid-label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.fs3-grid { display: flex; flex-wrap: wrap; gap: 6px 0; margin-bottom: 12px; }
.fs3-grid-item { width: 160px; }
.fs3-grid-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0;
}
.fs3-grid-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* 決定ボタン */
.fs3-submit-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.fs3-submit-btn:hover { background: #1a6fd1; }

/* 結果エリア */
.fs3-result { margin-top: 14px; }
.fs3-result.has-value {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
}
.fs3-result.has-error { font-size: 13px; color: var(--color-danger); padding: 4px 0; }
.fs3-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
}
.fs3-result-list code {
  font-family: monospace;
  background: #E8EDF4;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .fs3-grid-item { width: calc(50% - 4px); }
}

var jsonData = null;
var currentDataset = 'dataset1';

// ページ読み込み時にJSONを取得して両パターンを初期化する
// ※ fetch() は file:// では動作しないため、簡易サーバーで開いてください
(function () {
  fetch('./data/data.json')
    .then(function (res) { return res.json(); })
    .then(function (data) {
      jsonData = data;
      renderSelect(data[currentDataset].items);
      renderGrid(data[currentDataset].items);
    })
    .catch(function (err) {
      console.error('data.json の読み込みに失敗しました。data/ フォルダを確認してください。', err);
    });
})();

// データセット切り替えボタン
document.querySelectorAll('.fs3-switcher-btn').forEach(function (btn) {
  btn.addEventListener('click', function () {
    if (btn.dataset.dataset === currentDataset) return;

    document.querySelectorAll('.fs3-switcher-btn').forEach(function (b) {
      b.classList.remove('active');
    });
    btn.classList.add('active');

    currentDataset = btn.dataset.dataset;
    var items = jsonData[currentDataset].items;
    renderSelect(items);
    renderGrid(items);
    clearResult('fs3-select-result');
    clearResult('fs3-grid-result');
  });
});

// Pattern 1: select の option をJSONから生成する
function renderSelect(items) {
  var select = document.getElementById('fs3-select');
  // 先頭の「選択してください」option 以外をすべて削除する
  while (select.options.length > 1) {
    select.remove(1);
  }
  for (var i = 0; i < items.length; i++) {
    var opt = document.createElement('option');
    opt.value = items[i].key;
    opt.textContent = items[i].name;
    select.appendChild(opt);
  }
}

// Pattern 2: チェックボックスグリッドをJSONから生成する
function renderGrid(items) {
  var grid = document.getElementById('fs3-grid');
  grid.innerHTML = '';
  for (var i = 0; i < items.length; i++) {
    var div = document.createElement('div');
    div.className = 'fs3-grid-item';
    var label = document.createElement('label');
    var cb = document.createElement('input');
    cb.type = 'checkbox';
    cb.value = items[i].key;
    // テキスト取得用に name を data 属性で保持する
    cb.dataset.name = items[i].name;
    label.appendChild(cb);
    label.appendChild(document.createTextNode(' ' + items[i].name));
    div.appendChild(label);
    grid.appendChild(div);
  }
}

// Pattern 1: 決定
document.getElementById('fs3-select-submit').addEventListener('click', function () {
  var select = document.getElementById('fs3-select');
  var resultEl = document.getElementById('fs3-select-result');

  if (!select.value) {
    showError(resultEl, '選択してください');
    return;
  }

  // selectedIndex で選択中 option のテキストを取得する
  var selectedText = select.options[select.selectedIndex].text;
  showValue(resultEl,
    '<ul class="fs3-result-list"><li>' +
    'value: <code>' + select.value + '</code>' +
    ' &nbsp;/&nbsp; テキスト: <code>' + selectedText + '</code>' +
    '</li></ul>'
  );
});

// Pattern 2: 決定
document.getElementById('fs3-grid-submit').addEventListener('click', function () {
  var grid = document.getElementById('fs3-grid');
  var resultEl = document.getElementById('fs3-grid-result');
  // チェック済みのチェックボックスをすべて取得する
  var checked = grid.querySelectorAll('input[type="checkbox"]:checked');

  if (checked.length === 0) {
    showError(resultEl, '1つ以上選んでください');
    return;
  }

  var html = '<ul class="fs3-result-list">';
  checked.forEach(function (cb) {
    html += '<li>';
    html += 'value: <code>' + cb.value + '</code>';
    html += ' &nbsp;/&nbsp; テキスト: <code>' + cb.dataset.name + '</code>';
    html += '</li>';
  });
  html += '</ul>';
  showValue(resultEl, html);
});

function showValue(el, html) { el.className = 'fs3-result has-value'; el.innerHTML = html; }
function showError(el, msg)  { el.className = 'fs3-result has-error'; el.textContent = msg; }
function clearResult(id) {
  var el = document.getElementById(id);
  el.className = 'fs3-result';
  el.innerHTML = '';
}

data フォルダを作成し、data.json として保存してください。

{
  "dataset1": {
    "label": "都道府県",
    "items": [
      { "key": "tokyo",      "name": "東京都" },
      { "key": "kanagawa",   "name": "神奈川県" },
      { "key": "osaka",      "name": "大阪府" },
      { "key": "aichi",      "name": "愛知県" },
      { "key": "fukuoka",    "name": "福岡県" },
      { "key": "hokkaido",   "name": "北海道" },
      { "key": "kyoto",      "name": "京都府" },
      { "key": "hiroshima",  "name": "広島県" },
      { "key": "miyagi",     "name": "宮城県" },
      { "key": "okinawa",    "name": "沖縄県" }
    ]
  },
  "dataset2": {
    "label": "業種",
    "items": [
      { "key": "it",            "name": "IT・ソフトウェア" },
      { "key": "finance",       "name": "金融・保険" },
      { "key": "retail",        "name": "小売・流通" },
      { "key": "medical",       "name": "医療・福祉" },
      { "key": "education",     "name": "教育・研究" },
      { "key": "manufacturing", "name": "製造業" },
      { "key": "construction",  "name": "建設・不動産" },
      { "key": "food",          "name": "飲食・ホテル" },
      { "key": "media",         "name": "メディア・広告" },
      { "key": "government",    "name": "公務員・行政" }
    ]
  }
}