在不显示值的情况下进行选择下拉列表

Question

我正在编写一个Angular应用程序，并希望创建一个不显示元素值的select下拉元素。换句话说，我只想要箭头，然后显示所有可用值的下拉列表。然后我将使用Angular数据绑定来显示元素上方的值。

这有两个原因：

1. 我遇到选定值出现的常见Angular问题，就像用户选择了它下面的值一样。有了这个bug，实际值是正确的，但select元素显示错误的值，至少在重新选择之前。鉴于正确的值实际被选中，数据绑定将始终显示正确的值。

iOS和Android之间的不同浏览器中存在此问题。我添加了一些解决方法（例如添加一个额外的空白选项），可以在几种情况下修复问题，但它仍然存在于最新的iOS中。

1. 此外，我正在制作一个时间选择下拉列表（正常选择元素，而不是时间输入），我只希望以15分钟为增量。有时用户需要使用5,7.5或10分钟的增量，但这些增量将使用两侧的向上和向下增量按钮添加。这样的清单并没有被很多很小的选项所震撼，而是只有15分钟的块。元素上方显示的是时间。目前，当增量器按钮将值增加到15分钟块之间时，显示的选择值变为空白，这看起来不太好。

我可能还希望在选择框中不断显示占位符，例如“选择时间”。

选项由ng-options生成。

非常感谢你的帮助。

Answer 1

不是Angular方式，但vanilla JS很容易做到。

如果未在下拉列表中显示任何值，请将selectedIndex设置为-1。

<强>演示：

＆＃13;

＆＃13;

document.getElementById("mySelect").selectedIndex = "-1";

＆＃13;

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

＆＃13;

＆＃13;

＆＃13;