jQuery vs JavaScript: 要素にオプションを追加する方法
2024-04-02
jQueryを使用して<select>にオプションを追加する方法
HTML
まず、select要素とオプション要素を含むHTMLを用意します。
<select id="my-select">
<option value="">選択してください</option>
</select>
JavaScript
次に、JavaScriptを使用してオプションを追加します。
方法1: append() メソッド
append() メソッドを使用して、option要素をselect要素の末尾に追加できます。
$(document).ready(function() {
$("#my-select").append("<option value='1'>オプション1</option>");
$("#my-select").append("<option value='2'>オプション2</option>");
});
$(document).ready(function() {
$("#my-select").prepend("<option value='1'>オプション1</option>");
$("#my-select").prepend("<option value='2'>オプション2</option>");
});
before() および after() メソッドを使用して、特定のoption要素を基準にoption要素を追加できます。
$(document).ready(function() {
$("#my-select option:first").before("<option value='0'>すべて</option>");
$("#my-select option:last").after("<option value='3'>オプション3</option>");
});
jQuery
上記の方法をjQueryで記述すると以下のようになります。
$(document).ready(function() {
// 末尾に追加
$("#my-select").append($("<option>", {
value: "1",
text: "オプション1"
}));
$("#my-select").append($("<option>", {
value: "2",
text: "オプション2"
}));
// 先頭に挿入
$("#my-select").prepend($("<option>", {
value: "1",
text: "オプション1"
}));
$("#my-select").prepend($("<option>", {
value: "2",
text: "オプション2"
}));
// 特定のoption要素を基準に追加
$("#my-select option:first").before($("<option>", {
value: "0",
text: "すべて"
}));
$("#my-select option:last").after($("<option>", {
value: "3",
text: "オプション3"
}));
});
その他
上記以外にも、html() メソッドを使用してoption要素をまとめて設定することもできます。
$(document).ready(function() {
$("#my-select").html("<option value=''>選択してください</option><option value='1'>オプション1</option><option value='2'>オプション2</option>");
});
これらの方法を参考に、状況に合わせてselect要素にオプションを追加してください。
補足
- 上記のコードは、jQuery 3.x を使用しています。
- option要素の value 属性と text 属性は、必要に応じて変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select id="my-select">
<option value="">選択してください</option>
</select>
<script>
$(document).ready(function() {
// 末尾に追加
$("#my-select").append("<option value='1'>オプション1</option>");
$("#my-select").append("<option value='2'>オプション2</option>");
// 先頭に挿入
$("#my-select").prepend("<option value='3'>オプション3</option>");
$("#my-select").prepend("<option value='4'>オプション4</option>");
// 特定のoption要素を基準に追加
$("#my-select option:first").before("<option value='0'>すべて</option>");
$("#my-select option:last").after("<option value='5'>オプション5</option>");
});
</script>
</body>
</html>
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでファイルを開きます。
- select要素を確認すると、オプションが追加されていることを確認できます。
JavaScriptの appendChild() メソッド
const selectElement = document.getElementById("my-select");
const optionElement = document.createElement("option");
optionElement.value = "1";
optionElement.text = "オプション1";
selectElement.appendChild(optionElement);
const selectElement = document.getElementById("my-select");
const optionElement = document.createElement("option");
optionElement.value = "1";
optionElement.text = "オプション1";
selectElement.insertBefore(optionElement, selectElement.firstChild);
HTMLの option タグ
HTMLファイルに直接 option タグを追加することで、オプションを追加できます。
<select id="my-select">
<option value="">選択してください</option>
<option value="1">オプション1</option>
<option value="2">オプション2</option>
</select>
javascript jquery html-select
