Bootstrap 動態創建下拉選單：從數據源到交互的完整實現

核心 API

Bootstrap 4/5 下拉選單本質是 <select> 或 <div class="dropdown"> 結構，**無內建動態渲染 API**，需手動拼接 DOM 或使用 jQuery 操作。

方案一：原生 <select> + jQuery 動態填充

<select id="dynamicSelect" class="form-select"></select>

$.ajax({
  url: '/api/options',
  dataType: 'json',
  success: function(data) {
    var $sel = $('#dynamicSelect').empty();
    $.each(data, function(i, item) {
      $sel.append($('<option>', {
        value: item.id,
        text: item.name
      }));
    });
    // 若使用 selectpicker 需刷新
    $sel.selectpicker ? $sel.selectpicker('refresh') : null;
  }
});

方案二：Dropdown 組件動態構建（支援複雜 HTML）

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    請選擇
  </button>
  <ul class="dropdown-menu" id="dynamicMenu"></ul>
</div>

function renderMenu(items) {
  var $menu = $('#dynamicMenu').empty();
  items.forEach(function(item) {
    $menu.append(
      '<li><a class="dropdown-item" href="#" data-id="' + item.id + '">' + item.name + '</a></li>'
    );
  });
}
// 事件委派處理點擊
$('#dynamicMenu').on('click', '.dropdown-item', function(e) {
  e.preventDefault();
  var id = $(this).data('id');
  console.log('選中:', id);
});

動態獲取選項數量

// 原生 select
var count = $('#dynamicSelect option').length;

// Dropdown menu
var count = $('#dynamicMenu .dropdown-item').length;

進階：結合 Bootstrap 5 原生 JS（無 jQuery 依賴）

const select = document.getElementById('dynamicSelect');
fetch('/api/options')
  .then(r => r.json())
  .then(data => {
    data.forEach(item => {
      const opt = document.createElement('option');
      opt.value = item.id;
      opt.textContent = item.name;
      select.appendChild(opt);
    });
  });

選擇建議：簡單業務用原生 <select>，需自定義樣式/分組/圖標用 Dropdown 組件，均可通過標準 DOM API 實現完全動態化。