如何制作一个行为类似于选择表单元素的下拉菜单和下拉切换类

Question

我需要一个下拉菜单来更改按钮/切换的标签，就像 HTML 中的

select

标签一样。我该怎么做？

添加一些代码以进行澄清，但不知道这是否有很大帮助。我知道如何用 Bootstrap 制作下拉菜单。我知道如何制作 HTML 表单选择按钮。我想问的是如何将这两者结合起来。这是我的下拉菜单代码：

   <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
      Daily
      <span class = "caret"></span>
   </button>

   <ul class = "dropdown-menu" role = "menu">
      <li><a href = "#">Daily</a></li>
      <li><a href = "#">Weekly</a></li>
      <li><a href = "#">Monthly</a></li>
   </ul>

但是使用该代码，当选项更改时按钮的标签不会更改。我知道如果我想更改按钮的标签，我必须将其变成选择按钮。为了使其成为一个简单的选择按钮，我必须这样做：

<select name="time_range">
  <option value="daily">Daily</option>
  <option value="weekly">Weekly</option>
  <option value="monthly">Monthly</option>
</select>

但我仍然想保留 Bootstrap 下拉菜单的外观和感觉。

Answer 1

HTML

<div class="dropdown">
      <button id="dropdown-button" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="dropdownList">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </div>

jQuery

$(document).ready(function() {
  $('#dropdownList li').find("a").click(function(){

    $('#dropdown-button').html($(this).html());
  });
});

还有很多其他方法可以完成..希望这有帮助...codepen 链接

Answer 2

2023 年 bootstrap 5.3 更新

您可以通过使用单选按钮或复选框来模拟相同的效果：

.dropdown-item > input[type="radio"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
}

label.dropdown-item:has(input[type="radio"]:checked){
    background-color: var(--bs-dropdown-link-active-bg);
    color: var(--bs-dropdown-link-active-color);
}

label.dropdown-item:has(input[type="checkbox"]:checked) {
    background-color: var(--bs-dropdown-link-active-bg);
    color: var(--bs-dropdown-link-active-color);
}

.dropdown-item > input[type="checkbox"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>


<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Daily
   </button>

   <ul class = "dropdown-menu" role = "menu">
      <li>
        <label class="dropdown-item">
         <input type="radio" name="day" />
          Daily
        </label>
      </li>
      <li>
          <label class="dropdown-item">
             <input type="radio" name="day" />
             Weekly
          </label>
       </li>
      <li>
          <label class="dropdown-item">
             <input type="radio" name="day" />
             Monthly
          </label>
      </li>
   </ul>
 </div>
 
 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Daily  - Multiselect
   </button>

   <ul class = "dropdown-menu" role = "menu">
      <li>
        <label class="dropdown-item">
         <input type="checkbox" name="day" />
          Daily
        </label>
      </li>
      <li>
          <label class="dropdown-item">
             <input type="checkbox" name="day" />
             Weekly
          </label>
       </li>
      <li>
          <label class="dropdown-item">
             <input type="checkbox" name="day" />
             Monthly
          </label>
      </li>
   </ul>
 </div>

这个想法是使用单选按钮进行单一类型选择，或者使用复选框进行多类型选择。每个输入都有相同的名称，并且通过 css 我已经输入了。

此外，使用 CSS，我可以为具有

aria-current=true

的链接放置与 Bootstrap 相同的颜色。因此，您避免使用不必要的 js 来实现外观和感觉。