Question

我有一个HTML结构的表单：

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>

形成上面的代码，下拉列表看起来像1是默认选择的选项。无论如何，我们可以在哪里设置默认选择的选项，这在选项列表中是不可用的？

谢谢。

Answer 1

select元素不能具有选项列表中不存在的默认值。

但是，您可以将其默认选项设置为display: none。它仍将显示为select元素的值，但不会显示在下拉列表中：

select option:first-of-type {
  display: none;
}

<select>
  <option selected>Default</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
</select>

在上面的代码段中，一旦您选择了其他选项，就无法再选择“默认”选项。

请注意，这适用于Chrome，Firefox，Opera和Edge for Windows。它不在Internet Explorer或iPad上工作（至少）。真正的跨平台解决方案需要JavaScript。

如何在HTML下拉列表中设置默认选择选项？

1 个答案: