概要：このチュートリアルでは、JavaScriptで`select要素`にオプションを動的に追加および削除する方法を学習します。
HTMLSelectElement型は<select>要素を表します。これには、<select>要素にオプションを動的に追加するadd()メソッドと、<select>要素からオプションを削除するremove()メソッドがあります。
add(option,existingOption)– 既存のオプションの前に新しい<option>要素を<select>に追加します。remove(index)– インデックスで指定されたオプションを<select>から削除します。
オプションの追加
<select>要素にオプションを動的に追加するには、次の手順に従います。
- まず、新しいオプションを作成します。
- 次に、オプションをselect要素に追加します。
JavaScriptでオプションを動的に作成して<select>に追加するには、複数の方法があります。
1) Optionコンストラクタとadd()メソッドを使用する
まず、Optionコンストラクタを使用して、指定されたオプションテキストと値を持つ新しいオプションを作成します。
let newOption = new Option('Option Text','Option Value');Code language: JavaScript (javascript)次に、HTMLSelectElement要素のadd()メソッドを呼び出します。
const select = document.querySelector('select');
select.add(newOption,undefined);Code language: JavaScript (javascript)add()メソッドは2つの引数を受け取ります。最初の引数は新しいオプション、2番目の引数は既存のオプションです。
この例では、2番目の引数にundefinedを渡します。add()メソッドは、新しいオプションをオプションリストの最後に追加します。
2) DOMメソッドを使用する
まず、DOMメソッドを使用して新しいオプションを作成します。
// create option using DOM
const newOption = document.createElement('option');
const optionText = document.createTextNode('Option Text');
// set option text
newOption.appendChild(optionText);
// and option value
newOption.setAttribute('value','Option Value');Code language: JavaScript (javascript)次に、appendChild()メソッドを使用して、新しいオプションをselect要素に追加します。
const select = document.querySelector('select');
select.appendChild(newOption);Code language: JavaScript (javascript)オプションの削除
select要素からオプションを動的に削除する方法も複数あります。
最初の方法は、HTMLSelectElement型のremove()メソッドを使用することです。最初のオプションを削除する方法は次のとおりです。
select.remove(0); Code language: CSS (css)2番目の方法は、optionsコレクションを使用してインデックスでオプションを参照し、その値をnullに設定することです。
select.options[0] = null;Code language: JavaScript (javascript)3番目の方法は、removeChild()メソッドを使用して、指定されたオプションを削除することです。次のコードは、selectBoxの最初の要素を削除します。
// remove the first element:
select.removeChild(selectBox.options[0]);Code language: JavaScript (javascript)select要素のすべてのオプションを削除するには、次のコードを使用します。
function removeAll(selectBox) {
while (selectBox.options.length > 0) {
select.remove(0);
}
}Code language: JavaScript (javascript)最初のオプションを削除すると、select要素は別のオプションを最初のオプションとして移動します。removeAll()関数はselect要素の最初のオプションを繰り返し削除するため、すべてのオプションを削除します。
すべてをまとめる
ユーザーが入力テキストの値から新しいオプションを追加し、選択された1つ以上のオプションを削除できるアプリケーションを作成します。
プロジェクトの構造は次のとおりです。
├── css
| └── style.css
├── js
| └── app.js
└── index.htmlindex.html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Selected Value</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form>
<label for="framework">Framework:</label>
<input type="text" id="framework" placeholder="Enter a framework" autocomplete="off">
<button id="btnAdd">Add</button>
<label for="list">Framework List:</label>
<select id="list" name="list" multiple>
</select>
<button id="btnRemove">Remove Selected Framework</button>
</form>
</div>
<script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)js/app.js
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const listbox = document.querySelector('#list');
const framework = document.querySelector('#framework');
btnAdd.onclick = (e) => {
e.preventDefault();
// validate the option
if (framework.value == '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(framework.value, framework.value);
// add it to the list
listbox.add(option, undefined);
// reset the value of the input
framework.value = '';
framework.focus();
};
// remove selected option
btnRemove.onclick = (e) => {
e.preventDefault();
// save the selected options
let selected = [];
for (let i = 0; i < listbox.options.length; i++) {
selected[i] = listbox.options[i].selected;
}
// remove all selected option
let index = listbox.options.length;
while (index--) {
if (selected[index]) {
listbox.remove(index);
}
}
};
Code language: JavaScript (javascript)スタイルはこちらにあります。
動作方法
まず、querySelector()メソッドを使用して、入力テキスト、ボタン、セレクトボックスを含む要素を選択します。
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const listbox = document.querySelector('#list');
const framework = document.querySelector('#framework');Code language: JavaScript (javascript)次に、btnAddボタンにクリックイベントリスナーを付けます。
入力テキストの値が空白の場合、名前が必要であることをユーザーに知らせるアラートを表示します。そうでない場合は、新しいオプションを作成してセレクトボックスに追加します。オプションを追加した後、入力テキストに入力されたテキストをリセットし、そこにフォーカスを設定します。
btnAdd.addEventListener('click', (e) => {
e.preventDefault();
// validate the option
if (framework.value.trim() === '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(framework.value, framework.value);
// add it to the list
listbox.add(option, undefined);
// reset the value of the input
framework.value = '';
framework.focus();
});Code language: JavaScript (javascript)3番目に、btnRemoveボタンにクリックイベントリスナーを登録します。イベントリスナーでは、選択されたオプションを配列に保存し、それぞれを削除します。
btnRemove.addEventListener('click', (e) => {
e.preventDefault();
// save the selected options
let selected = [];
for (let i = 0; i < listbox.options.length; i++) {
selected[i] = listbox.options[i].selected;
}
// remove all selected option
let index = listbox.options.length;
while (index--) {
if (selected[index]) {
listbox.remove(index);
}
}
});Code language: JavaScript (javascript)まとめ
- JavaScriptは
HTMLSelectElement型を使用して<select>要素を表します。 HTMLSelectElementのadd()メソッドを使用して、<select>要素にオプションを追加します。HTMLSelectElementのremove()メソッドを使用して、<select>要素からオプションを削除します。
