jQueryでセレクトボックスにoptionを追加する方法｜append・each・動的生成

• 基本は $('#sel').append('<option value="1">A</option>') で末尾に追加する。
• 動的な値には $('<option>', {value: v, text: t}) でオブジェクト生成すると安全。
• 配列やサーバーから取得したデータは $.each() でループして一括追加する。
• 先頭は prepend()、特定位置は対象<option>に対する after() / before() を使う。
• 追加後の選択状態は $('#sel').val(値) で設定し、入れ替え前は empty() でクリアする。
• ユーザー入力など外部由来の文字列は text プロパティ経由で入れ、HTML文字列連結によるXSSを避ける。

<select id="sel">
  <option value="1">りんご</option>
  <option value="2">みかん</option>
</select>

// 末尾に1件追加する
$('#sel').append('<option value="3">ぶどう</option>');

$(function() {
  $('#sel').append('<option value="3">ぶどう</option>');
});

var value = '3';
var label = 'ぶどう';

// 属性をオブジェクトで指定して<option>を生成
var $opt = $('<option>', {
  value: value,
  text: label
});

$('#sel').append($opt);

var $opt = $('<option>', {
  value: '3',
  text: 'ぶどう',
  selected: true   // 追加と同時に選択状態にする
});
$('#sel').append($opt);

var items = [
  {value: '1', text: 'りんご'},
  {value: '2', text: 'みかん'},
  {value: '3', text: 'ぶどう'}
];

$.each(items, function(index, item) {
  var $opt = $('<option>', {value: item.value, text: item.text});
  $('#sel').append($opt);
});

var $options = [];
$.each(items, function(index, item) {
  $options.push($('<option>', {value: item.value, text: item.text}));
});
$('#sel').append($options);   // 配列をまとめて追加

$.getJSON('/api/fruits', function(data) {
  var $sel = $('#sel');
  $sel.empty();   // 既存の選択肢をクリア(必要に応じて)
  $.each(data, function(i, item) {
    $sel.append($('<option>', {value: item.id, text: item.name}));
  });
});

// 先頭に追加
$('#sel').prepend('<option value="">選択してください</option>');

// value="2"のオプションの直後に挿入
$('#sel option[value="2"]').after('<option value="3">ぶどう</option>');

// 先頭から数えて2番目(0始まりのindex 1)の直前に挿入
$('#sel option').eq(1).before('<option value="9">新規</option>');

// value="3"の項目を選択状態にする
$('#sel').val('3');

// 現在選択されている値を取得する
var current = $('#sel').val();

// いったん空にしてから入れ直す
$('#sel').empty();
$('#sel').append('<option value="1">りんご</option>');
$('#sel').append('<option value="2">みかん</option>');

// value="2"のオプションだけ削除
$('#sel option[value="2"]').remove();

var sel = document.getElementById('sel');

// new Option(テキスト, 値) で生成して末尾へ追加
var opt = new Option('ぶどう', '3');
sel.add(opt);

// textContentで入れるとタグとして解釈されず安全
var opt2 = document.createElement('option');
opt2.value = '4';
opt2.textContent = 'もも';
sel.appendChild(opt2);

• XSS(クロスサイトスクリプティング): ユーザー入力やサーバーから受け取った文字列をHTML文字列として連結しappend()に渡すと、<等を含む値がタグとして解釈される危険があります。外部由来の値は$('<option>', {text: ...})やtext()、標準APIならtextContentで入れます。
• value重複: 同じvalueを持つ<option>が複数あると、val()での選択や送信値の判別が意図と異なる結果になります。一意になるよう、追加前に重複チェックをするかempty()で作り直します。
• 選択状態のリセット: empty()で作り直すと、それまでの選択状態は失われます。再構築の前にval()で現在の値を保存し、追加後に再設定すると選択を維持できます。
• 追加前にスクリプトが走る: <select>がまだ読み込まれていない段階で実行すると追加されません。$(function(){ ... })で囲むか、対象より後ろにスクリプトを置きます。

var $sel = $('#sel');
var prev = $sel.val();   // 現在の選択値を退避

$sel.empty();
$.each(items, function(i, item) {
  $sel.append($('<option>', {value: item.value, text: item.text}));
});

$sel.val(prev);   // 選択状態を復元(該当値があれば)