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!
1 answers
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.