Bootstrap 下拉选择选项，但用于表单而不是 <a>

Posted 2023-03-05

【中文标题】Bootstrap 下拉选择选项，但用于表单而不是 <a>

【英文标题】：Bootstrap dropdown select option but for a form instead of <a>

【发布时间】：2021-06-07 05:27:07

【问题描述】：

我有一个带有引导下拉菜单的表单。但是，当我尝试使其成为“选择”形式时，它会失去所有“主要”样式。我该如何保留它？

How do I convert this to have the <option value="x"></option> format? 
but still having the same primary-button look? Thanks..


<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">Choose an option&nbsp;</button>
  <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Option 1</a>
       <a class="dropdown-item" href="#">Option 2</a>
       <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

【问题讨论】：

您无法设置选择框的样式，您必须构建类似于自定义解决方案（您已经拥有）的东西

【参考方案1】：

您可以查看以下链接。您必须使用引导选择库来满足您的要求。

您可以关注的链接：

Trying to use bootstrap-select for my dropdown

包链接

https://www.npmjs.com/package/bootstrap-select

html

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

jQuery

$('.my-select').selectpicker();

使用 CSS 根据需要更改您的选择选项和按钮。

【参考方案2】：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">Choose an option&nbsp;
  <select class="dropdown-menu">
    <option class="dropdown-item" href="#">Option 1</option>
    <option class="dropdown-item" href="#">Option 2</option>
    <option class="dropdown-item" href="#">Option 3</option>
  </select>
  </button>
</div>

或者你也可以使用它

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">Choose an option&nbsp;
  <select class="dropdown-menu">
    <option value="">Option 1</option>
    <option value="">Option 2</option>
    <option value="" >Option 3</option>
  </select>
  </button>
</div>

【讨论】：

谢谢，但这给了我一个下拉菜单和它下面的第二个下拉菜单。