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要素の値として表示されますが、それは、ドロップダウンリストには表示されません。上記のスニペットで

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が必要です。