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 link

如何创建一个下拉菜单和下拉切换类，其行为类似于选择Form元素

1 个答案: