jQueryのselectタグとは？selectタグの操作方法を紹介

Javascript
jQuery
プログラミング言語

公開日時: 2021-05-18 　更新日時: 2022-06-06

この記事でわかること

システム エンジニア: jQueryのselectについて、詳しく知りたいです。

プロジェクト マネージャー: selectタグはoptionタグと組み合わせることで、ドロップダウンメニューを実現することができるんですよ。

jQueryのselectとは？

jQueryはJavaScriptで利用できるフリーの高機能なライブラリです。jQueryでselectと言えば、HTMLのselectタグをjQueryの機能で操作することを意味します。

JavaScriptでjQueryを利用する場合は、htmlファイルのheadタグ内で以下のようにjQueryのライブラリを設定します。なおjQueryは定期的にバージョンアップされるので、最新かどうかを確認した方が良いでしょう。

HTMLのselectタグについて

jQueryでselectタグを操作する方法を解説する前に、selectタグがどのような機能を持っているかについて説明しましょう。selectタグはoptionタグと組み合わせることで、以下のようなドロップダウンメニューを実現することができます。

またselectタグにmultipleを指定することで、複数選択ができるようになります。

selectタグの中のvalueを取得する

まずはjQueryでselectタグの値を取得してみましょう。selectタグによるドロップダウンメニューはHTMLでは以下のようになっています。

<select id=”number”>
<option value=”0″>Please select.</option>
<option value=”1″>No.1>/option>
<option value=”2″>No.2>/option>
<option value=”3″>No.3>/option>
<option value=”4″>No.4>/option>
</select>

selectタグの中のoptionタグのvalue要素を取得するjQueryは以下になります。

$(document).ready(function(){
$(‘#number’).change(function() {
var v = $(‘option:selected’).val();
console.log(v);
})
});

jQueryの基礎

jQueryのコードはheadタグの中のscriptタグに記述します。

<html>
<head>
<scriptsrc=”https://code.jquery.com/jquery-3.5.1.min.js”></script>
<script type=”text/javascript”>
（ここにJQueryを記述）
</script>
</head>
<body>
（ここにHTMLタグを記述）
</body>
</html>

コードが長くなる場合はheadに以下のように記述して、別のjsファイルの中に記述しましょう。

jQueryの最初の$(document).readyのdocumentはhtml全体を指し、readyはそれを読み込んだらfunctionの内容を実行するという意味です。jQueryでは$()の中身をセレクタ、それに続く.が付いたワードをメソッドと呼びます。

changeメソッドとvalメソッド

functionの中の$(‘#number’).changeは、idがnumberのselectタグに変化があった場合にメソッドの処理を行います。changeメソッドでselectに変化が生じた時に指定したfunctionの処理を行います。

changeメソッドで指定したfunctionでは、’option:selected’で選択されたoptionタグに対しvalメソッドを呼び出しています。valメソッドはvalueの値を取得できます。その結果を変数のvに入れています。そしてvをコンソールにログ出力しています。

コンソールはGoogle Chromeの場合は対象のhtmlページが表示されている時にF12キーでDevToolsを立ち上げ、Consoleタブを選ぶと見ることができます。なおコンソールではなくポップアップ表示の方が良ければ、alert(value);で小さなウィンドウにvの内容を表示できます。

valメソッドは選択もできる

valメソッドは値を取得するだけでなく、設定することもできます。

$(document).ready(function(){
$(‘#number’).val(2);
});

こうするとドロップダウンメニューが最初からNo.2が選ばれた状態になります。なお以下のようにoptionタグにselectedを付けても同様のことが出来ます。

selectの複数選択

冒頭で説明したように、以下のようにselectタグにmultipleを付ければ複数選択できるようになります。今回はbuttonタグも追加します。

jQueryは以下のようにしてください。

$(document).ready(function(){
$(‘button’).click(function() {
var v = $(‘#number’).val();
console.log(v);
})
});

valメソッドは複数の値にも対応できる

今回は$(‘button’).clickによりボタンがクリックされた時にfunctionの処理を行います。functionでは今までと同じようにvalで値を取得しています。このままで複数選択にも対応できるのです。No.2とNo.3を選んでボタンを押すと、コンソールのログには以下のように出力されます。

[“2”, “3”]

JavaScriptの配列の形式で表示されるということですね。

optionタグの追加と削除

jQueryはselectタグのoptionの追加も簡単にできます。ここまでのサンプルのタグに対し、以下のようにすれば5番目のoptionを追加できます。

$(document).ready(function(){
$(‘#number’).append(‘<option value=”5″>No.5</option>’);
});

逆に削除する場合は、以下のようにします。

$(document).ready(function(){
$(‘option[value=”2″]’).remove();
});

これでvalueが2のoptionタグを削除できます。以下のような方法もあります。

$(document).ready(function(){
$(‘option’).remove(‘:contains(“No.2”)’);
});

この場合はテキストがNo.2のoptionタグを削除します。

システム エンジニア: このようにして、selectタグを扱うのですね。

プロジェクト マネージャー: 実際に自分でコードを書いて、覚えていくと良いでしょう。

JQueryのselectタグの操作は簡単

jQueryのselectタグ操作について解説しましたが、ご理解頂けましたでしょうか。簡単にできることが分かったのではないかと思います。jQueryを駆使して素晴らしいWebサイトを作成しましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムロゴ

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryのselectタグとは？selectタグの操作方法を紹介