JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【HTML入門】select要素のドロップダウンリストにデフォルト値（初期選択）を設定する方法

HTMLでは、<select>要素を使うことで、フォーム内に簡単なドロップダウンリスト（セレクトボックス）を作成し、ユーザーに入力してもらうことができます。セレクトボックスは「プルダウンメニュー」とも呼ばれ、複数の選択肢を一覧形式で表示できる便利な部品です。

さらに、このドロップダウンリストにはデフォルト値（初期状態で選択されている項目）を設定することも可能です。方法はとてもシンプルで、あらかじめ選択しておきたい項目の<option>タグに selected属性 を追加するだけです。

【HTML入門】select要素のドロップダウンリストにデフォルト値（初期選択）を設定する方法

selected属性の基本的な使い方

以下のように、初期表示したい選択肢にselectedを記述します。

<option value = "Discrete Mathematics" selected>Discrete Mathematics</option>

実行例

次のコードを実行すると、HTMLの<select>要素でデフォルト値を設定する方法を確認できます。この例では、「Discrete Mathematics」が初期状態で選択された状態で表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Select Element</title>
   </head>
   <body>
      <p> Select any one:</p>
      <form>
         <select name = "dropdown">
            <option value = "Java">Java</option>
            <option value = "Discrete Mathematics" selected>Discrete Mathematics</option>
            <option value = "Chemistry">Chemistry</option>
         </select>
      </form>
   </body>
</html>

補足ポイント

  • selected属性はブール型の属性なので、値を指定せずに記述だけで有効になります。
  • 1つの<select>要素内で複数の項目にselectedを付けた場合、ブラウザは最後のものを選択状態として扱います。
  • multiple属性を付けて複数選択可能にした場合は、複数の項目にselectedを指定できます。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値