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

【问题标题】：How to make a dropdown-menu and dropdown-toggle class that behaves like a select Form element如何制作一个下拉菜单和下拉切换类，其行为类似于选择表单元素
【发布时间】：2016-11-02 09:28:18
【问题描述】：

我需要一个下拉菜单来更改按钮/切换的标签，就像 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>

But with that code, the button's label wouldn't get changed when the option changed.我知道如果我想改变按钮的标签，我必须把它变成一个选择按钮。为了使它成为一个简单的选择按钮，我必须这样做：

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

但我仍然希望保留 Bootstrap 下拉菜单的外观。

【问题讨论】：

请提供相关代码...
什么意思？我知道如何制作选择按钮。我知道如何使用引导程序制作下拉按钮。但我不知道如何组合它们。

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案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

【讨论】：

感谢您的帮助。我很感激。