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

JavaScriptでドロップダウンリストの項目を事前選択する方法

JavaScriptを使ってドロップダウン（プルダウン）メニューの項目を事前に選択状態にするには、selectedIndex プロパティを使用します。このプロパティに、あらかじめ選択しておきたい項目のインデックス番号を設定するだけで実現できます。

ドロップダウンリストは、HTMLでは <select> タグを使って作成します。一方、JavaScriptによる処理は <script> タグ内に記述します。<script> タグの中では、add_select_id が対象となる <select> 要素のid、add_item_index が数値によるインデックスを表します。このインデックスとは、リスト内の各項目に割り当てられた番号のことで、事前選択したい項目の番号を指定します。なお、インデックスは0から始まるため、2番目の項目を選択したい場合は「1」を指定することに注意してください。

記述例

以下のコードを実行すると、JavaScriptによってドロップダウンの項目をプログラム的に事前選択できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML selectタグ</title>
   </head>
   <body>
      <p> 選択してください：</p>
      <form>
         <select id="dropdown" name="dropdown" class="form-control">
            <option value = "Android">Android</option>
            <option value = "CSS">CSS</option>
            <option value = "Python">Python</option>
         </select>
      </form>
      <script>
         document.getElementById("dropdown").selectedIndex = "1";
      </script>
   </body>
</html>

上記の例では、「CSS」が初期状態で選択された表示になります。このように selectedIndex を活用すれば、フォームの初期値設定やユーザーの利便性向上など、さまざまな場面で活用できます。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptのmap()メソッドで配列を変換する方法を解説

    JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。 以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&