HOWTO · JavaScript
JavaScript で選択するオプションを追加する
要素を選択するオプションを手動で追加する可能性は、JavaScript で変更できます。ここでは、新しいオプションを作成して追加するための Dom 操作、オプションを追加するための Option コンストラクターの初期化、および新しいオプションを結合する一般的な方法について説明します。
このページの内容
一般に、select 要素の options は手動で配置できます。
ただし、多くのオプションがあり、カテゴリを動的に処理できないため、手動の場合に問題が発生する可能性があります。この点で、新しいオプションを作成し、オンデマンドでそれらを変更する JavaScript メソッドははるかに受け入れられます。
select 要素に新しいオプションを追加する 3つの方法を示します。まず、DOM を操作し、オブジェクトの格納にテキストと値を追加する option 要素を作成します。
後で、オブジェクトを select-id に追加します。もう 1つの方法は、オプションコンストラクターを開始し、必要なテキストと値を追加することです。
作品を selectelement オブジェクトに追加して表示します。最後に、jQuery Dom 要素を作成し、それを select に追加します。
JavaScript で option タグを作成して select に追加する
select のインスタンス（x）を宣言し、element option に object option を作成します。次に、オブジェクトにテキストと値を割り当てます。
理解を深めるためにコード行を見てみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "hand";
console.log(option.value);
option.text = "Hand";
x.add(option);
}
</script>
</body>
</html>
出力：
したがって、スクリプト化されたタグの最後のコマンドには x.add(option) があります。これは、新しいオプションを select に結合することを意味します。ここでは、add の代わりに append と appendChild を使用できます。これは問題なく機能します。
JavaScript で新しいオプションを追加するために Option コンストラクタを使用する
次の例では、新しいオプション用の新しいスロットを作成するためにコンストラクターOption のみが必要です。
Option コンストラクターは 2つのパラメーターのみを取ります。まず、テキスト値を取得し、次に値属性の入力を取得します。
コードスニペット：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = new Option("Hand", "hand");
console.log(option.value);
x.appendChild(option);
}
</script>
</body>
</html>
出力：
jQuery DOM 要素を使用して JavaScript に新しいオプションを追加する
jQuery DOM 要素は option タグを起動し、後で .val と .text を使用してテキストと値を定義します。次に、それを select-id に追加します。
コードスニペット：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function myF() {
$('#mySelect').append($('<option>').val('head').text('Head'));
}
</script>
</body>
</html>
出力：
