Como seleccionar e mostrar os itens numa lista usando guiadores com 'bootstrap'

Question

Como seleccionar e mostrar os itens numa lista usando guiadores com 'bootstrap'

Bom dia

estou a tentar usar dropdowns de Bootstrap para mostrar dados específicos armazenados na minha API, e mostrar esses dados com guiadores. Consegui que isso funcionasse no entanto, o menu só mostra os itens da lista, uma vez que você selecione um item da lista que volta para a marca de nome do botão, ou seja, o botão principal.

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

o único problema é que não posso usar algo como:

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

Esta é a minha primeira pergunta, por isso espero ter feito tudo correctamente. Obrigado!

2

html javascript jquery twitter-bootstrap handlebars.js

Author: ShanaSkydancer, 2017-10-18

Source

1 answers

score 1 · Accepted Answer

Como indicado no comentário, confundiu o componente com o elemento seleccione. O seu html não é válido, uma vez que utiliza o atributo value na marca <a>, que não é um elemento de forma.

Se você quiser apresentar um utilizador com várias alternativas por campo, e há muitos campos (seu exemplo: Marca, Tamanho e Cor), então ele pode seguir escolha entre várias opções para cada uma delas e, em seguida, executar outra ação com base na sua selecção (Filtro , por exemplo), use o html <select>, que está pré-equipado com o comportamento que espera:

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

Adicionei primeiro <option>Choose {{field}}</option> só para que possa ver aqui, a opção que o utilizador selecciona substitui a {[6] } após a selecção.