jQueryで<select>のオプションを変更する方法

jQueryを使ってHTMLの<select>要素のオプションを変更する方法について説明します。

基本的な方法

• html()メソッドを使って、<select>要素のHTML内容を直接変更します。
• val()メソッドを使って、<select>要素の選択されたオプションの値を設定または取得します。

例

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</   select>

$(document).ready(function() {
  // 選択されたオプションの値を設定する
  $('#mySelect').val('option2');

  // <select>要素のHTML内容を直接変更する
  $('#mySelect').html('<option value="newOption">New Option</option>');
});

オプションを追加または削除する

• remove()メソッドを使って、<select>要素から特定のオプションを削除します。

$(document).ready(function() {
  // 末尾に新しいオプションを追加する
  $('#mySelect').append('<option value="option4">Option 4</option>');

  // 先頭に新しいオプションを追加する
  $('#mySelect').prepend('<option value="option0">Option 0</option>');

  // 特定のオプションを削除する
  $('#mySelect option[value="option2"]').remove();
});

オプションの属性を変更する

• attr()メソッドを使って、オプションの属性を設定または取得します。

$(document).ready(function() {
  // オプションのdisabled属性を設定する
  $('#mySelect option[value="option1"]').attr('disabled', true);

  // オプションのselected属性を設定する
  $('#mySelect option[value="option3"]').attr('selected', true);
});

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</   select>

JavaScript (jQuery)
 

$(document).ready(function() {
  // 選択されたオプションの値を設定する
  $('#mySelect').val('option2');

  // <select>要素のHTML内容を直接変更する
  $('#mySelect').html('<option value="newOption">New Option</option>');

  // 末尾に新しいオプションを追加する
  $('#mySelect').append('<option value="option4">Option 4</option>');

  // 先頭に新しいオプションを追加する
  $('#mySelect').prepend('<option value="option0">Option 0</option>');

  // 特定のオプションを削除する
  $('#mySelect option[value="option2"]').remove();

  // オプションのdisabled属性を設定する
  $('#mySelect option[value="option1"]').attr('disabled', true);

  // オプションのselected属性を設定する
  $('#mySelect option[value="option3"]').attr('selected', true);
});

解説

1. 選択されたオプションの値を設定する
   

   • $('#mySelect').val('option2');
   • mySelectというIDを持つ<select>要素の選択されたオプションの値をoption2に変更します。

2. <select>要素のHTML内容を直接変更する
   

   • $('#mySelect').html('<option value="newOption">New Option</option>');
   • mySelectというIDを持つ<select>要素のHTML内容を新しいオプション<option value="newOption">New Option</option>に置き換えます。

3. 末尾に新しいオプションを追加する
   

4. 特定のオプションを削除する
   

   • $('#mySelect option[value="option2"]').remove();
   • mySelectというIDを持つ<select>要素からvalue属性がoption2であるオプションを削除します。

5. オプションのdisabled属性を設定する
   

   • $('#mySelect option[value="option1"]').attr('disabled', true);

clone()メソッドによるコピーと変更

• clone()メソッドで<select>要素を複製し、そのコピーに対して変更を行います。

$(document).ready(function() {
  // <select>要素を複製する
  var clonedSelect = $('#mySelect').clone();

  // 複製された<select>要素のオプションを変更する
  clonedSelect.find('option[value="option2"]').remove();
  clonedSelect.find('option[value="option3"]').attr('disabled', true);

  // 複製された<select>要素を元の要素に置き換える
  $('#mySelect').replaceWith(clonedSelect);
});

each()メソッドによるループ処理

• each()メソッドを使って、<select>要素の各オプションに対して処理を行います。

$(document).ready(function() {
  $('#mySelect option').each(function(index, option) {
    var value = $(option).val();
    if (value === 'option2') {
      $(option).remove();
    } else if (value === 'option3') {
      $(option).attr('disabled', true);
    }
  });
});

filter()メソッドによるフィルタリング

• filter()メソッドを使って、特定の条件を満たすオプションを抽出します。

$(document).ready(function() {
  $('#mySelect option').filter(function(index, option) {
    return $(option).val() === 'option2';
  }).remove();

  $('#mySelect option').filter(function(index, option) {
    return $(option).val() === 'option3';
  }).attr('disabled', true);
});