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

JavaScriptでドロップダウンリストを含むフォームのIDを取得する方法

JavaScriptでドロップダウンリスト（<select>要素）を含むフォームのIDを取得するには、idプロパティを使用します。select要素などのフォーム部品は、自分が属しているフォームを参照するformプロパティを持っているため、この2つを組み合わせることで簡単にフォームのIDへアクセスできます。

コード例

以下のコードを実行すると、ドロップダウンリストを含むフォームのIDを取得して画面に表示できます。

<!DOCTYPE html>
<html>
   <body>
      <form id="myForm1">
         <button id="btn" type="button" value="my_button">Demo</button>
      </form><br>
      <form id="myForm2">
         <select id="mySelect">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
         </select>
      </form>
      <script>
         var val = document.getElementById("mySelect").form.id;
         document.write("<br>Form id with dropdown: "+val);
      </script>
   </body>
</html>

コードの解説

ポイントとなるのは次の1行です。

var val = document.getElementById("mySelect").form.id;

処理の流れは以下のとおりです。

document.getElementById("mySelect") で、IDが「mySelect」のセレクトボックス（ドロップダウンリスト）を取得します。続いて form プロパティによって、そのセレクトボックスが属する親フォーム（myForm2）の要素へアクセスします。最後に id プロパティを参照することで、フォームのIDである「myForm2」を取得できる仕組みです。

なお、この手法はselect要素だけでなく、テキストボックスやチェックボックスなど、他のフォーム部品に対しても同様に利用できます。

  1. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo

  2. JavaScriptでフィルターリスト（検索絞り込み機能）を作成する方法

    JavaScriptを使えば、検索ボックスに入力したキーワードに応じてリスト項目をリアルタイムに絞り込む「フィルターリスト」を簡単に実装できます。以下は、HTML・CSS・JavaScriptを組み合わせた基本的なサンプルコードです。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * {