【jQuery】selectタグの値やテキストを取得する方法

Web開発の世界は、常に新しい技術やフレームワークが登場する、変化と成長の舞台です。しかし、時には基本に立ち返り、古典的とも言えるツールを深く理解することが、より良いコードを書くための鍵となります。本日は、そんな古典的なツールの一つ、jQueryの活用法に焦点を当てます。特に、ウェブページに頻繁に使われるselectタグ――ドロップダウンメニューから値を取得したり、選択されたオプションのテキストを取得する方法について詳しく解説します。

jQueryを用いれば、これらの操作は驚くほどシンプルになります。本記事では、具体的なコードスニペットを交えながら、どのようにselectタグの値やテキストを取得するか、実用的なステップバイステップのガイドを提供します。それでは、さっそく深掘りしていきましょう。

jQueryとは？
jQueryでのselectタグの操作
1. 選択されたオプションの値を取得する
2. 選択されたオプションのテキストを取得する
サンプルコード
まとめ

jQueryとは？

jQueryはJavaScriptのライブラリで、Webサイトのインタラクティブな部分を作成するために使用されます。その人気は、シンタックスの簡潔さと、多数の機能が簡単に利用できるために広がりました。今日、我々が取り組むのはその一部、selectタグの操作です。

jQueryでのselectタグの操作

選択されたオプションの値を取得する

jQueryを使うと、select要素から選択されたオプションの値を取得することが簡単になります。以下のコードスニペットを見てみましょう。

var value = $('#yourSelectElementId').val();

ここで、#yourSelectElementIdはselect要素のIDを指します。この一行のコードで、選択されているオプションの値を取得できます。

選択されたオプションのテキストを取得する

同様に、選択されたオプションのテキストを取得することも可能です。以下のコードスニペットを参照してください。

var text = $('#yourSelectElementId option:selected').text();

このコードは選択されているオプションのテキストを取得します。#yourSelectElementIdはあなたのselect要素のIDになります。

サンプルコード

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Select Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <select id="fruits">
        <option value="1">Apple</option>
        <option value="2">Banana</option>
        <option value="3">Cherry</option>
    </select>
    <button id="getFruit">Get Selected Fruit</button>

    <script>
        $(document).ready(function(){
            $("#getFruit").click(function(){
                var value = $('#fruits').val();
                var text = $('#fruits option:selected').text();
                alert("Selected fruit's value is: " + value + ", and the text is: " + text);
            });
        });
    </script>
</body>
</html>

このコードでは、ユーザーが選択したフルーツ（アップル、バナナ、またはチェリー）の値とテキストを取得します。”Get Selected Fruit”というボタンがクリックされると、アラートダイアログが表示され、選択されたフルーツの値とテキストが表示されます。

ここで重要なのは、コードがドキュメントが完全に読み込まれた後（$(document).ready(function(){…}）に実行されること、そしてjQueryがボタンのクリックイベントを処理するために使われていることです。