动态更改javascript中的按钮下拉列表？答案

【问题标题】：Dynamically change a button-drop list in javascript?动态更改javascript中的按钮下拉列表？
【发布时间】：2026-01-10 07:05:01
【问题描述】：

尝试从 Bootstrap HTML 结合 Javascript 创建一个可更改的按钮下拉菜单。 HTML 看起来像：

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

希望能够根据页面上发生的其他情况更改下拉按钮的选择。因此，如果用户单击页面上某处的“个人资料”按钮而不是 Choice1、Choice2 和 Choice3，则会出现 Resume、Contact Info、Education 等。菜单中的项目数会改变，显示文本的确切值也会改变。理想情况下，希望使用某种类型的数组从选项中推送/弹出。试过add、childappend等。

【问题讨论】：

标签： javascript jquery twitter-bootstrap button drop-down-menu

【解决方案1】：

这是一种方法 - 将所有菜单项放在 HTML 中，然后使用 CSS 隐藏/显示适当的菜单项

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Menu
        <span class="caret"></span>
    </a>
    <ul id='my-dropdown' class="dropdown-menu" data-menu-id='default'>
       <li class='default'><a href="#">Choice1</a></li>
       <li class='default'><a href="#">Choice2</a></li>
       <li class='default'><a href="#">Choice3</a></li>
       <li class="divider"></li>
       <li class='default'><a href="#">Choice..</a></li>
       <li class='profile'><a href="#">Resume</a></li>
       <li class='profile'><a href="#">Education</a></li>
       <li class='badgers'><a href="#">Eat a badger</a></li>
    </ul>
</div>

CSS：

/* hide all menu items */
ul.dropdown-menu > li {
    display: none; 
}

/* show menu items if they're relevant */
ul.dropdown-menu[data-menu-id=default] > li.default, 
ul.dropdown-menu[data-menu-id=profile] > li.profile, 
ul.dropdown-menu[data-menu-id=badgers] > li.badgers {
   display: list-item;
}

现在使用javascript更改下拉列表中的data-menu-id属性，菜单项将自动更改：

var dropdownMenu = document.getElementById('my-dropdown');
dropdownMenu.setAttribute("data-menu-id", "profile");

有很多其他方法可以做到这一点，但这可能是最巧妙的方法。 CSS 基本上说“如果列表项的类与父项的菜单 id 属性匹配，则使其可见”。

这种方法的一个优点是，您可以让一个菜单项在多个不同的菜单中可见，只需为其提供多个类：

<!-- will be visible in the 'profile' menu and the 'badger' one -->
<li class='profile badgers'><a href="#">Badger Resume</a></li>

【讨论】：