如何在HTML下拉菜單中設置默認選擇選項？

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 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。