目的

HTMLのセレクトボックスのデフォルト値を設定する方法をまとめる

方法

そのままだとoption要素の最も上の内容をデフォルトで表示する。

<select name="stg">
    <option value="1">hogehoge</option>
    <option value="2">fugafuga</option>
    <option value="3">piyopiyo</option>
</select>

下記のように表示される。
デフォルト表示したいoption要素にselectedと記載する。例えば「piyopiyo」をセレクトボックスにデフォルト表示したい場合は下記のように記載する。
```
<select name="stg">
    <option value="1">hogehoge</option>
    <option value="2">fugafuga</option>
    <option value="3" seleced>piyopiyo</option>
</select>
```
下記のように表示される。

参考ソースコード

「piyopiyo」をデフォルト表示するソースを下記に記載する。

<!DOCTYPE html>
<html lang="js">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header></header>
    <main>
        <select name="stg">
            <option value="1">hogehoge</option>
            <option value="2">fugafuga</option>
            <option value="3" selected>piyopiyo</option>
        </select>
    </main>
    <footer></footer>
</body>
</html>

HTML セレクトボックスのデフォルト値を設定する

目的

方法

参考ソースコード