【初心者向け】jQueryでWebページを操作してみよう！ドロップダウンリストの例から実践
jQueryを使って要素の値を取得・設定する方法
このチュートリアルでは、jQueryを使ってHTML要素の値を取得・設定する方法を解説します。具体的には、document.getElementById("selectlist").value のjQuery版について説明します。
jQueryで要素の値を取得するには、以下のコードを使用します。
$(selector).val();
このコードでは、selector で指定した要素の値を取得します。selector は、CSSセレクタ、ID、要素オブジェクトなどを指定できます。
例
以下のコードは、#selectlist というIDを持つドロップダウンリストの選択されているオプションの値を取得します。
var selectedValue = $("#selectlist").val();
$(selector).val(value);
このコードでは、selector で指定した要素の値を value に設定します。
$("#selectlist").val("option2");
document.getElementById("selectlist").value は、JavaScriptのネイティブな方法で要素の値を取得する方法です。jQueryで同等の処理を行うには、以下のコードを使用します。
$("#selectlist").val();
jQueryを使うと、JavaScriptのネイティブな方法よりも簡潔に要素の値を取得・設定することができます。上記のコードを参考に、jQueryを駆使してWebページを操作してみてください。
jQueryを使ったサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select id="selectlist">
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
<button id="button1">選択されたオプションを取得</button>
<button id="button2">オプションを設定</button>
<script>
$(document).ready(function() {
$("#button1").click(function() {
var selectedValue = $("#selectlist").val();
alert("選択されたオプション: " + selectedValue);
});
$("#button2").click(function() {
$("#selectlist").val("option3");
});
});
</script>
</body>
</html>
説明
このコードは以下の処理を行います。
- ドロップダウンリスト (
#selectlist) を作成します。 - 2つのボタンを作成します。
- ボタン1 (
#button1) をクリックすると、選択されているオプションの値を取得し、アラートで表示します。
- ボタン1 (
動作確認
- 上記のHTMLコードを保存して、Webブラウザで開きます。
- ドロップダウンリストからオプションを選択します。
このサンプルコードは、jQueryを使ってドロップダウンリストを操作する基本的な方法を示しています。このコードを参考に、jQueryを駆使してWebページを操作してみてください。
jQueryでドロップダウンリストを操作するその他の方法
prop() メソッドは、要素のプロパティを取得・設定するために使用できます。ドロップダウンリストの選択されているオプションの値を取得するには、以下のコードを使用します。
var selectedValue = $("#selectlist").prop("value");
var selectedValue = $("#selectlist").attr("value");
$("#selectlist").each(function() {
var optionValue = $(this).val();
console.log(optionValue);
});
上記以外にも、jQueryにはドロップダウンリストを操作するための様々な方法があります。それぞれの方法の特徴を理解して、状況に応じて適切な方法を選択してください。
jquery
