0
I have a select that has two options:
Size, Color.
When I select Size, when I click again on my select, it still shows the Size option.
I would like to remove it and make available only the other, because this has already been selected.
I tried that logic:
<select [class.disabled]="loadingcadastro" (change)="getIdTipoVariacao(item.value.tipo)"
formControlName="tipo" class="browser-default custom-select">
<option class="dropdown-item" selected>{{item.value.tipo || 'Tipo da Variação'}}</option>
<option [hidden]="item.value.tipo === tipoVariacao.valor" *ngFor="let tipoVariacao of tiposvariacoes;let j = index"
class="dropdown-item">{{tipoVariacao.valor}}</option>
</select>
The first
<option>always displays the selected option. It will always be visible as well. That is, if you want to hide the selected value, you should remove the option you haveselected.– Woss
I removed the select and put the label with the {{item.value.type || 'Type of Variation'}}, you think that aesthetically looks better like this or in the old days?
– veroneseComS
I don’t see bad points in always showing all options, including the one already selected. If it selects the same, nothing changes. However, hiding the selected one, I see the possibility of confusing the user. By selecting "work" and clicking again, appearing only "color" the user may feel obliged to select "color" thinking that, for some reason, "work" is no longer possible. Not to mention that it is more intuitive to always have the current sample together with the rest to make a comparison. For the sake of UX, I’d leave it on display.
– Woss
OK, I’ll go back as was
– veroneseComS
@Andersoncarloswoss agree with you! I see the "component" like this, you have a box with the selected item, and a list of options, I believe it is not right to remove anything that is in the list of options, by removing the item from the list the user may find that it will not be possible to select it again... Renaot PLS Here are some options to work with
selectwho may be of interest https://answall.com/questions/288517/addir-um-t%C3%Adtulo-a-tag-select-sem-a-op%C3%A7%C3%A3o-Selected-disabled-sem-que-ele-a/288523#288523– hugocsl