使用 bootstrap v5.3 自定义选择

Question

这是我想使用 bootstrap v5.3 复制的选择

未选择

开启选择

我一直在查看 bootstrap 给出的所有选项。

我没有看到任何在

<options>

标签中包含详细信息的选择

是否可以使用引导程序，或者我是否必须为此创建一个自定义选择，因为以下内容不起作用并显示内联的所有内容：

<select>
    <option>
         Option 1 <br />
         Created At: date...
    </option>
</select>

Answer 1

使用下拉菜单而不是选择

Bootstrap 下拉组件更合适，尽管它需要额外的 html 才能使其看起来像您的示例。

使用 Bootstrap 下拉菜单作为选项选择器

您可以通过添加隐藏的单选按钮来在选项之间切换来实现此目的。将文本和图标添加到下拉项列表中。您还需要事件侦听器来更新按钮文本和内部服务状态。

打开并运行代码片段以查看其工作原理。

const access = document.querySelector('#access');

// set toggle button text on change
access.addEventListener('change', (e) => {
  e.currentTarget.querySelector('.dropdown-toggle').innerHTML = e.target.value
})
  
// update internal service status text before show  
access.addEventListener('show.bs.dropdown', (e) => {

  // update users, rules, and date

})

/* optional styling */

label.dropdown-item:has(input:checked)>div::after {
  content: "✔";
  margin-left: 1rem;
}

label.dropdown-item input[type=radio] {
  display: none;
}

<div class="container pt-2">

<div class="dropdown" id="access">
  <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Publicly Accessible
  </button>
  <ul class="dropdown-menu">
    <li>
      <label class="dropdown-item">
      <input type="radio" name="access" value="Publicly Accessible" checked>
      <div class="h6">
        <i class="fa-solid fa-unlock me-1 text-warning"></i>
        Publicly Accessible
      </div>
      <p>No access restrictions</p>
      </label>
    </li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li>
      <label class="dropdown-item">
      <input type="radio" name="access" value="Internal Service">
      <div class="h6">
      <i class="fa-solid fa-lock me-1 text-success"></i>
      Internal Service
      </div>
      <p>0 Users, 2 Rules - Created: 27th May, 2022 11:14 pm</p>
      </label>
    </li>
  </ul>
</div>

</div>

<!-- Bootstrap 5 + FontAwesome -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">