サーバサイド・クライアントサイド両方対応！select要素の初期値設定

2024-04-02

HTMLのselect要素のデフォルト値を設定する方法

option要素のselected属性を使う

これは最も基本的な方法です。初期値として設定したいoption要素に、selected属性を追加します。

<select name="country">
  <option value="jp" selected>日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

上記のコードでは、日本が初期値として選択されます。

JavaScriptを使って、select要素のselectedIndexプロパティを設定することで、初期値を設定できます。

<select name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<script>
  const selectElement = document.querySelector('select[name="country"]');
  selectElement.selectedIndex = 1; // アメリカを初期値として設定
</script>

サーバサイドでselect要素のオプションを生成する場合、初期値として設定したいoption要素にselected属性を設定することができます。

<?php
$selectedCountry = 'jp';

$options = [
  'jp' => '日本',
  'us' => 'アメリカ',
  'uk' => 'イギリス',
];
?>

<select name="country">
<?php foreach ($options as $value => $label) : ?>
  <option value="<?php echo $value; ?>" <?php echo $value === $selectedCountry ? 'selected' : ''; ?>><?php echo $label; ?></option>
<?php endforeach; ?>
</select>

簡単な方法で初期値を設定したい場合は、option要素のselected属性を使う方法がおすすめです。
JavaScriptを使って動的に初期値を設定したい場合は、JavaScriptを使う方法がおすすめです。
サーバサイドでselect要素のオプションを生成している場合は、サーバサイドで設定する方法がおすすめです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML Select デフォルト値サンプル</title>
</head>
<body>
  <h1>option要素のselected属性を使う</h1>
  <select name="country">
    <option value="jp" selected>日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
  </select>

  <h1>JavaScriptを使う</h1>
  <select name="country">
    <option value="jp">日本</option>
    <option value="us">アメリカ</option>
    <option value="uk">イギリス</option>
  </select>

  <script>
    const selectElement = document.querySelector('select[name="country"]');
    selectElement.selectedIndex = 1; // アメリカを初期値として設定
  </script>

  <h1>サーバサイドで設定する</h1>
  <?php
  $selectedCountry = 'jp';

  $options = [
    'jp' => '日本',
    'us' => 'アメリカ',
    'uk' => 'イギリス',
  ];
  ?>

  <select name="country">
  <?php foreach ($options as $value => $label) : ?>
    <option value="<?php echo $value; ?>" <?php echo $value === $selectedCountry ? 'selected' : ''; ?>><?php echo $label; ?></option>
  <?php endforeach; ?>
  </select>
</body>
</html>

実行方法

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

確認方法

各セクションのselect要素を確認することで、初期値が設定されていることを確認できます。

日本が初期値として選択されていることを確認できます。
JavaScriptを使う

HTMLのselect要素のデフォルト値を設定するその他の方法

disabled属性を使うと、特定のoption要素を選択できないようにできます。初期値として設定したいoption要素以外のoption要素にdisabled属性を追加することで、間接的に初期値を設定することができます。

<select name="country">
  <option value="jp">日本</option>
  <option value="us" disabled>アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<select name="country">
  <option value="jp">日本</option>
  <option value="us" hidden>アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<select name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

<style>
  select option[value="jp"] {
    background-color: #ccc;
  }
</style>