J Dawg
J Dawg

Reputation: 535

Make a select dropdown without displaying the value

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:

  1. I am experiencing a common Angular problem of selected values appearing as though the user has selected the value beneath it. With this bug, the actual value is correct, but the select element displays the wrong value, at least until it is re-selected. Given that the correct value is actually selected, the data binding will always display the correct value.

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.

  1. Additionally, I am making a time selection dropdown (normal select element, not time input) which I want to only be in 15 minute increments. Sometimes the user will need to use 5, 7.5 or 10 minute increments, but these will be added using up and down incrementer buttons on either side. This is so the list is not blown out by many, many tiny options and is instead only 15 minute blocks. Displayed above the element is the time. At present, when the incrementer buttons increase the value to be between the 15 minute blocks, the displayed select value goes blank, which doesn't look good.

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

Answers (1)

Rahul Desai
Rahul Desai

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

Related Questions