5つの方法でSELECT要素のオプションを自在に操る：jQueryによる実践ガイド
2024-04-05
jQueryを使用してSELECT要素の特定のオプションを選択するには、いくつかの方法があります。 以下に、最も一般的な方法をいくつか紹介します。
方法
val()メソッドを使用して、SELECT要素の選択オプションの値を直接設定できます。 以下の例では、#my-select要素のオプションのうち、value属性が"option2"であるものを選択します。
$("#my-select").val("option2");
$("#my-select").prop("selected", true);
find()メソッドとeq()メソッドを使用して、SELECT要素内の特定のオプションを選択できます。 以下の例では、#my-select要素のオプションのうち、2番目のものを選択します。
$("#my-select").find("option").eq(1).prop("selected", true);
$("#my-select").find("option").each(function() {
if ($(this).text() === "オプション2") {
$(this).prop("selected", true);
}
});
補足
- 上記の例では、
#my-selectというIDを持つSELECT要素を対象としていますが、必要に応じてセレクターを変更してください。 val()メソッドとprop()メソッドは、いずれも選択オプションの値を直接設定する方法ですが、prop()メソッドの方がより汎用的に使用できます。find()メソッドとeq()メソッドを使用する方法は、SELECT要素内のオプションの順番を指定して選択したい場合に便利です。
<!DOCTYPE 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>
<select id="my-select">
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
<option value="option3">オプション3</option>
</select>
<script>
// val()メソッドを使用する
$("#my-select").val("option2");
// prop()メソッドを使用する
// $("#my-select").prop("selected", true); // すべてのオプションが選択されてしまう
// find()メソッドとeq()メソッドを使用する
$("#my-select").find("option").eq(1).prop("selected", true);
// each()メソッドを使用する
$("#my-select").find("option").each(function() {
if ($(this).text() === "オプション2") {
$(this).prop("selected", true);
}
});
</script>
</body>
</html>
このコードを実行すると、#my-select要素のvalue属性が"option2"であるオプションが選択されます。
各方法の比較
| 方法 | メリット | デメリット |
|---|---|---|
val()メソッド | 簡単 | 値でしか選択できない |
prop()メソッド | 汎用性が高い | すべてのオプションが選択されてしまう可能性がある |
find()メソッドとeq()メソッド | 順番で選択できる | 順番が変更されると選択できなくなる |
each()メソッド | 条件で選択できる | 処理速度が遅くなる可能性がある |
jQueryでSELECT要素の特定のオプションを選択する他の方法
$("#my-select").find("option[value='option2']").attr("selected", "selected");
$("#my-select").html("<option value='option1'>オプション1</option><option value='option2' selected='selected'>オプション2</option><option value='option3'>オプション3</option>");
$("#my-select").find("option[data-id='2']").prop("selected", true);
change()イベントを使用して、SELECT要素のオプションが変更された際に処理を実行できます。 以下の例では、#my-select要素のオプションが変更された際に、選択されたオプションの値を出力します。
$("#my-select").change(function() {
console.log($(this).val());
});
jquery
