Javascript 如何使用带引导的手柄在下拉列表中选择和显示项目

你好

我试图使用引导下拉菜单来显示API中存储的特定数据，并用手柄显示所述数据。我已经得到了工作，但下拉菜单只显示列表项目，一旦你选择一个列表项目，它会返回到按钮的名称标签，即主下拉按钮

<div class="filterTable col-md-12">                                
  <script class="filterDisplay" type="text/handlebars x">                            
    <div class="dropdownMenus col-md-12">
      <div class="dropdown float-left">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Brand
        </button>
        <ul class="dropdown-menu dropdownBrand" aria-labelledby="dropdownMenuButton">
          {{#each shoes}}
            <li><a class="brandDropdown dropdown-item" id="brandDropdown" value="{{this}}">{{this.brand}}</a></li>
          {{/each}}
        </ul>
      </div>

      <div class="dropdown float-left">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Size
        </button>
        <ul class="dropdown-menu dropdownSize" aria-labelledby="dropdownMenuButton">
          {{#each shoes}}
            <li><a class="sizeDropdown dropdown-item" id="sizeDropdown" value="{{this}}">{{this.size}}</a></li>
          {{/each}}
        </ul>
      </div>

      <div class="dropdown float-left">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Color
        </button>
        <ul class="dropdown-menu dropdownColor" aria-labelledby="dropdownMenuButton">
          {{#each shoes}}
            <li><a class="colorDropdown dropdown-item" id="colorDropdown" value="{{this}}">{{this.color}}</a></li>
          {{/each}}
        </ul>
      </div>

      <p data-placement="top" data-toggle="tooltip" title="Search"><button class="filterButton btn btn-success btn-xs float-left" data-title="Search">Search </button></p>                    
    </div>
  </script>
</div>

这是我的第一个问题，所以我希望我做的一切都是正确的。

---

谢谢

如注释中所述，您将下拉组件与select元素混淆。您的HTML无效，因为您在

标记上使用了

value

属性，该标记不是表单元素

如果您希望为用户提供每个字段的多个备选方案，并且有多个字段（例如：品牌、大小和颜色），因此用户可以在每个字段的多个选项中进行选择，然后根据其选择执行另一个操作（例如筛选），请使用html

，它预先配备了您期望的行为：

.form字段{
浮动：左；
}

烙印
选择品牌
{{{每双鞋}
{{this.brand}}
{{/每个}}
大小
选择大小
{{{每双鞋}
{{this.size}}
{{/每个}}
颜色
选择颜色
{{{每双鞋}
{{this.color}}
{{/每个}}

我想你把Bootstrap的

。下拉列表

和

的操作方式搞混了-它们是两个完全不同的东西。@j.titus好的，那么我该如何让列表项保持选中状态，但我已经有了HTML/Bootstrap/把手？非常感谢！这解决了我的问题！我唯一需要改变的是将“Choose”选项移到{{{each}上方，这样就不会重复了。

$('.dropdown li a').on('click', function(){
  var selected = $(this).text();
  $(this).parents('.dropdown').find('button').text(selected);
})