.net column
.NET開発者のためのブログメディア

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

公開日時:   更新日時:
基本情報技術者試験の試験対策はこちら>>

SE
jQueryのselectについて、詳しく知りたいです。

PM
selectタグはoptionタグと組み合わせることで、ドロップダウンメニューを実現することができるんですよ。

jQueryのselectとは?


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

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

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

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ファイルの中に記述しましょう。

<script type=”text/javascript” src=”script.js”></script>

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を付けても同様のことが出来ます。

<option value=”2″ selected>No.2</option>

selectの複数選択

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

<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>
<button>button</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タグを削除します。

SE
このようにして、selectタグを扱うのですね。

PM
実際に自分でコードを書いて、覚えていくと良いでしょう。

JQueryのselectタグの操作は簡単

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags