CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraphandlebars.js
ShanaSkydancer
ShanaSkydancer

Reputation: 99

How to select and display items in a dropdown using handlebars with bootstrap

Good day

I'm trying to use Bootstrap dropdowns to display specific data stored in my API, and display said data with handlebars. I've gotten that to work however the dropdown menu only shows the list items, once you select a list item it goes back to the button's name tag ie the main dropdown button.

<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>

Only problem is that I can't use something like:

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

This is my first question so I hope I did everything correctly. Thanks!

Upvotes: 3

Views: 4649

Answers (1)

wscourge
wscourge

Reputation: 11291

As stated in the comment, you confused dropdown component with the select element. Your HTML is not valid, as you use value attribute on the <a> tag, which is not a form element.

If you want to present a user with multiple alternatives per field, and there are many fields (your example: Brand, Size and Color), so he can follow choosing among multiple choices for each one of them and then perform another action based on his selection (Filter, for example), use html <select>, which is pre-equipped with behaviour you expect:

.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>

I added first <option>Choose {{field}}</option> just so you can see here, that option user selects replaces the selected one upon selection.

Upvotes: 3

Related Questions