HTML でデフォルト値を選択
-
selected="selected"を使用して、HTML<select>要素のデフォルト値を選択する -
<option selected>を使って HTML の<select>要素のデフォルト値を選択する
この記事では、HTML<select> 要素のデフォルト値を選択する 2つの方法について説明します。
selected="selected"を使用して、HTML<select> 要素のデフォルト値を選択する
selected="selected" オプションを使用して、HTML コードのデフォルト値を選択できます。selected 属性を <option> タグに書き込みます。selected 属性の値を selected に設定して、Web ページが最初にロードされたときにデフォルトで特定のオプションを選択できます。HTML ではブール属性と呼ばれます。事前に選択されたオプションがドロップダウンリストの最初に表示されます。この属性は、<option> 要素でのみ使用できます。Google Chrome、Internet Explorer、Firefox、Opera などの Web ブラウザをサポートしています。
たとえば、HTML 本文内に、<select> タグを作成し、その中に 5つのオプションを続けます。各オプションの value 属性に 1-5 の数字を記入してください。各オプションの <option> タグの間に One から Five までのテキストを書き込みます。次に、デフォルト値として選択する特定の値（以下の例ではオプション 3）に <option> タグを開いた直後に、値 selected で selected 属性を書き込みます。最後に、<select> タグを閉じます。
以下の例では、select=selected メソッドを使用して、ドロップダウンリストでデフォルト値を選択します。1 から 5 までの値を選択できるドロップダウンリストを作成しました。ページがリロードされると、オプション Three がデフォルトでロードされます。これは、selected 属性を使用して要素をデフォルトとして指定しているためです。
サンプルコード：
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</body>
<option selected> を使って HTML の <select> 要素のデフォルト値を選択する
<option selected> オプションを使用して、HTML のデフォルト値を選択できます。このプロセスも最初のプロセスと多少似ています。これはブール属性でもあります。<select> 要素は、主にユーザーからの入力を収集するために使用されます。<select> 要素内に書き込む <option> タグは、ドロップダウンリストに含まれる使用可能なアイテムを定義します。特定の <option> タグに selected オプションを記述して、オプションをデフォルトの選択オプションとして指定できます。
たとえば、上記の方法のように、HTML 本文内に <select> タグを作成し、その後に <option> タグを作成します。次の行で、1-5 の値をオプションタグに指定し、オプションタグを閉じます。このプロセスを 5 回繰り返します。次に、2 番目の <option> タグの直後に <selected> を書き込んで、デフォルト値として選択します。最後に、<select> タグを閉じます。
以下の例では、<option selected> オプションを使用してデフォルト値を選択しています。ページが読み込まれると、2 番目の要素の場合に <option selected> を使用したため、ドロップダウンリストにオプション 2 がデフォルトで読み込まれていることがわかります。
サンプルコード：
<body>
<select>
<option> 1 </option>
<option selected> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn