HTML select要素で選択オプションをデフォルトで空白に設定する方法

2024-04-02

HTML select要素で選択オプションをデフォルトで空白に設定する方法

value=""属性を使用する

option要素にvalue=""属性を指定することで、そのオプションが選択された時の値を空にします。

<select>
  <option value="">選択してください</option>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

この方法の利点は、シンプルで分かりやすいことです。

disabled属性とselected属性を使用する

option要素にdisabled属性とselected属性を同時に指定することで、そのオプションが選択不可になり、デフォルトで選択されます。

<select>
  <option value="" disabled selected>選択してください</option>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

この方法の利点は、JavaScriptを使用せずに、選択不可な初期値を設定できることです。

シンプルで分かりやすい方法が良い場合は、value=""属性を使用します。
JavaScriptを使用せずに、選択不可な初期値を設定したい場合は、disabled属性とselected属性を使用します。

補足

上記の方法で設定した初期値は、ユーザーが他のオプションを選択すれば変更されます。
JavaScriptを使用すれば、より複雑な初期値を設定することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <h1>`value=""`属性を使用する</h1>
  <select>
    <option value="">選択してください</option>
    <option value="1">オプション1</option>
    <option value="2">オプション2</option>
  </select>

  <h1>`disabled`属性と`selected`属性を使用する</h1>
  <select>
    <option value="" disabled selected>選択してください</option>
    <option value="1">オプション1</option>
    <option value="2">オプション2</option>
  </select>
</body>
</html>

解説

1つ目の例では、option要素にvalue=""属性を指定しています。

2つ目の例では、option要素にdisabled属性とselected属性を同時に指定しています。

どちらの方法でも、select要素の初期値は空白になります。

実行方法

上記のコードをHTMLファイルに保存し、ブラウザで開きます。

結果

ブラウザで開くと、2つのselect要素が表示されます。

1つ目のselect要素は、初期値が空白になっています。

上記のように、HTML select要素で選択オプションをデフォルトで空白に設定するには、2つの方法があります。

HTML select要素で選択オプションをデフォルトで空白に設定する他の方法

<select id="mySelect">
  <option value="">選択してください</option>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
const mySelect = document.getElementById('mySelect');
mySelect.selectedIndex = 0;
</script>

上記のコードは、JavaScriptを使用して、select要素の初期値を最初のオプションに設定する例です。

サーバーサイドでselect要素の初期値を設定することもできます。

例えば、PHPを使用する場合は、以下のように記述できます。

<?php
$options = array(
  '' => '選択してください',
  '1' => 'オプション1',
  '2' => 'オプション2',
);

$selectedOption = '';

if (isset($_POST['submit'])) {
  $selectedOption = $_POST['option'];
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <h1>サーバーサイドで設定する</h1>
  <form method="post">
    <select name="option">
      <?php foreach ($options as $value => $text) : ?>
        <option value="<?php echo $value; ?>" <?php if ($value === $selectedOption) : ?>selected<?php endif; ?>><?php echo $text; ?></option>
      <?php endforeach; ?>
    </select>
    <input type="submit" name="submit" value="送信">
  </form>
</body>
</html>