如何选择和使用把手与引导

Question

好日子

我试图使用引导程序的下拉列表中显示存储在我的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> 

唯一的问题是我不能使用类似：

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

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

Answer 1

如评论中所述，您将下拉框组件与组件选择为元素。您的html无效，因为您在<a>标记上使用value属性，该属性不是表单元素。

如果你想提出每场多个备选方案用户，并且有许多领域（你的例子：品牌，尺寸和颜色），所以他可以按照每一个多种选择中进行选择这些，然后执行另一个动作根据他的选择（过滤，例如），使用HTML <select>，其中预先配备的行为，你希望：

.form-field { 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="dropdownMenus col-md-12"> 
 
    <div class='form-field'> 
 
    <label for='brandFilter'>Brand</label> 
 
    <select id='brandFilter' class='form-control'> 
 
     <option>Choose brand</option>} 
 
     {{#each shoes}} 
 
     <option value="{{this}}">{{this.brand}}</option> 
 
     {{/each}} 
 
    </select> 
 
    </div> 
 
    
 
    <div class='form-field'> 
 
    <label for='sizeFilter'>Size</label> 
 
    <select id='sizeFilter' class='form-control'> 
 
     <option>Choose size</option>} 
 
     {{#each shoes}} 
 
     <option value="{{this}}">{{this.size}}</option> 
 
     {{/each}} 
 
    </select> 
 
    </div> 
 
    
 
    <div class='form-field'> 
 
    <label for='colorFilter'>Color</label> 
 
    <select id='colorFilter' class='form-control'> 
 
     <option>Choose color</option>} 
 
     {{#each shoes}} 
 
     <option value="{{this}}">{{this.color}}</option> 
 
     {{/each}} 
 
    </select> 
 
    </div> 
 
    
 
</div>

我首先添加了<option>Choose {{field}}</option>，您可以在此处看到该选项，用户选择将在选择时替换selected。