jQueryでselect要素の値を取得 - onChangeイベント編

2024-04-02

jQueryで「select」要素の値を取得 - onChangeイベント編

概要
コード解説
その他のイベント

概要

jQueryは、JavaScriptのライブラリで、Webページの開発を効率化できます。select要素の値を取得するのも、jQueryを使えば簡単です。

ここでは、onChangeイベント発生時にselect要素の値を取得する方法を紹介します。

以下のコードは、select要素の値を取得し、consoleに表示する例です。

<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

$(document).ready(function() {
  $('#mySelect').on('change', function() {
    var selectedValue = $(this).val();
    console.log('選択された値:', selectedValue);
  });
});

コード解説

$(document).ready(function() {

この部分は、DOMContentLoadedイベントが発生した時に実行されるコードです。

$('#mySelect').on('change', function() {

この部分は、#mySelect要素のchangeイベント発生時に実行されるコードです。

var selectedValue = $(this).val();

この部分は、select要素の現在選択されているオプションのvalue属性値を取得し、selectedValue変数に格納します。

console.log('選択された値:', selectedValue);

この部分は、selectedValue変数の値をconsoleに出力します。

その他のイベント

changeイベント以外にも、select要素には様々なイベントがあります。

focus: 要素がフォーカスされた時に発生

これらのイベントを利用して、様々な処理を行うことができます。

まとめ

jQueryを使えば、select要素の値を簡単に取得できます。onChangeイベント以外にも、様々なイベントを利用することで、より高度な処理を行うことができます。

HTML

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryでselect要素の値を取得</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQueryでselect要素の値を取得</h1>
    <p>
        <select id="mySelect">
            <option value="1">オプション1</option>
            <option value="2">オプション2</option>
            <option value="3">オプション3</option>
        </select>
    </p>
    <p id="selectedValue"></p>
    <script>
        $(document).ready(function() {
            $('#mySelect').on('change', function() {
                var selectedValue = $(this).val();
                $('#selectedValue').text('選択された値: ' + selectedValue);
            });
        });
    </script>
</body>
</html>

説明

HTML

select要素: id属性をmySelectに設定
option要素: 3つのオプションを用意
#selectedValue要素: 選択された値を表示

JavaScript

$(document).ready(function() {
- DOMContentLoadedイベント発生時に実行
$('#mySelect').on('change', function() {
var selectedValue = $(this).val();
- 選択されたオプションのvalue属性値を取得
$('#selectedValue').text('選択された値: ' + selectedValue);

実行

上記のコードをHTMLファイルとして保存し、ブラウザで開きます。select要素からオプションを選択すると、#selectedValue要素に選択された値が表示されます。

ポイント

$(this): イベントが発生した要素を取得
.val(): select要素の場合、選択されたオプションのvalue属性値を取得

changeイベント以外にも、様々なイベントを利用可能
詳細は、jQuery API Documentationを参照

jQueryでselect要素の値を取得するその他の方法

.val()メソッド

select要素の値を取得するには、**.val()**メソッドを使用するのが最も一般的です。

<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

$(document).ready(function() {
  var selectedValue = $('#mySelect').val();
  console.log('選択された値:', selectedValue);
});

.find()メソッド

.find()メソッドを使用して、選択されたオプション要素を取得し、そのvalue属性値を取得することもできます。

<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

$(document).ready(function() {
  var selectedValue = $('#mySelect').find(':selected').val();
  console.log('選択された値:', selectedValue);
});

上記のコードは、#mySelect要素のselected属性を持つオプション要素を取得し、そのvalue属性値を取得します。

.attr()メソッド

<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

$(document).ready(function() {
  var selectedValue = $('#mySelect').attr('value');
  console.log('選択された値:', selectedValue);
});

上記のコードは、#mySelect要素のvalue属性値を取得します。

.prop()メソッド

<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

$(document).ready(function() {
  var selectedValue = $('#mySelect').prop('value');
  console.log('選択された値:', selectedValue);
});

jQueryでselect要素の値を取得するには、**.val()メソッド、.find()メソッド、.attr()メソッド、.prop()**メソッドなど、いくつかの方法があります。

jquery select

jQueryでselect要素の値を取得 - onChangeイベント編