セレクトボックス — Tom Select

/* === マルチセレクト（Tom Select）サンプル ===
   :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: 480px; }

.fs5-wrapper { display: flex; flex-direction: column; }
.fs5-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Tom Select はセレクトを .ts-wrapper に置き換えるため、外観はここで上書きする */
.ts-wrapper.multi .ts-control {
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 8px;
}
.ts-wrapper.multi.focus .ts-control {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}
.ts-control .item {
  background: var(--color-accent);
  color: #fff;
  border-radius: 4px;
  padding: 3px 6px;
}
.ts-dropdown .active {
  background: #EAF2FF;
}

/* 決定ボタン */
.fs5-submit-btn {
  margin-top: 16px;
  align-self: flex-start;
  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;
}
.fs5-submit-btn:hover { background: #1a6fd1; }

/* 結果エリア */
.fs5-result { margin-top: 14px; }
.fs5-result.has-value {
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}
.fs5-result.has-value ul { margin: 0; padding-left: 18px; }
.fs5-result.has-error { font-size: 13px; color: var(--color-danger); padding: 4px 0; }

/* リセットボタン */
.demo-controls { margin-top: 12px; }
.reset-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: #5A6A7A;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
}
.reset-btn:hover { background: var(--color-bg); border-color: var(--color-muted); }

// カテゴリ名（テキスト）をvalueから引くための対応表
var categoryLabels = {
  shipping: "配送・出荷", return: "返品・交換", billing: "請求・支払い",
  quote: "見積もり", contract: "契約", account: "アカウント登録",
  login: "ログイントラブル", password: "パスワード再設定", plan: "プラン変更",
  cancel: "解約", campaign: "キャンペーン", coupon: "クーポン",
  outage: "システム障害", feature: "機能要望", howto: "操作方法",
  security: "セキュリティ", api: "API連携", other: "その他"
};

// Tom Select を初期化する
// remove_button プラグインでタグに×ボタンを表示し、maxItemsで最大5件に制限する
var tomSelectInstance = new TomSelect('#fs5-select', {
  plugins: ['remove_button'],
  maxItems: 5,
  placeholder: 'カテゴリを検索・選択'
});

// 決定ボタン：選択中の値を結果エリアに一覧表示する
document.getElementById('fs5-submit').addEventListener('click', function () {
  var values = tomSelectInstance.getValue(); // multiple指定時は配列で返る
  var resultEl = document.getElementById('fs5-result');

  if (values.length === 0) {
    resultEl.className = 'fs5-result has-error';
    resultEl.textContent = '1つ以上選択してください';
    return;
  }

  // 選択されたvalueに対応するテキストでリストを作る（innerHTMLに変数を結合しない）
  var list = document.createElement('ul');
  values.forEach(function (value) {
    var li = document.createElement('li');
    li.textContent = categoryLabels[value];
    list.appendChild(li);
  });
  resultEl.className = 'fs5-result has-value';
  resultEl.textContent = '';
  resultEl.appendChild(list);
});

// リセット：全選択を解除し、結果エリアをクリアする
function resetDemo() {
  tomSelectInstance.clear();
  var resultEl = document.getElementById('fs5-result');
  resultEl.className = 'fs5-result';
  resultEl.textContent = '';
}