Reputation: 535
I am coding an Angular app and want to make a select dropdown element which does not display the value within the element. In other words, I just want the arrow, which will then display the dropdown of all the available values. I will then use Angular data binding to display the value above the element.
This is for two reasons:
This problem exists in different browsers between iOS and Android. I have added workarounds (such as adding an additional blank option) that fix the problem in a couple of cases, but it is still present in the latest iOS.
I may possibly also prefer to just display a placeholder constantly in the select box such as 'Select Time'.
The options are generated by ng-options.
Thanks a lot for your help.
Upvotes: 0
Views: 1170
Reputation: 15501
Not an Angular way, but vanilla JS does it pretty easily.
For not showing any value selected in the dropdown, just set the selectedIndex
as -1
.
Demo:
document.getElementById("mySelect").selectedIndex = "-1";
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
Upvotes: 2