jQuery によるドロップダウンリストの OPTION 操作

jQuery を用いてドロップダウンリストを操作する基本的な方法については、「jQuery によるドロップダウンリストの操作」で説明しました。

ここではもう少しヤヤコシイ操作を実現することを考えてみましょう。

特にここではドロップダウンに含まれる、OPTION 要素の操作を取り上げます。

階層型のドロップダウンの実装

まずここで作る、ドロップダウンの内容（意味）に親子関係のあるドロップダウンを見てください。

ここでは State - City (すなわち州―市）という関係の親子関係を考えています。（日本でいえば都道府県と市の関係）

州が記載された一つ目のドロップダウンの内容を選択すると、それに応じた内容の市が二つ目のドロップダウンにセットされます。

これを実現するコードは次の通りです。まず HTML は次の通り。

State: <select id="stateSelect">
  <option value="HI">Hawaii</option>
  <option value="TX">Texas</option>
  <option value="CA">California</option>
</select>
City: <select id="citySelect"></select>

JavaScript のコードは次の通り。

$(document).ready( function() {

var c = [
  { state: 'HI', city: 'Honolulu' },
  { state: 'HI', city: 'Kahala' },
  { state: 'TX', city: 'Dallas' },
  { state: 'TX', city: 'Irving' },
  { state: 'CA', city: 'Los Angeles' },
  { state: 'CA', city: 'San Diego' }
];

$('#stateSelect').change(function(){
  setCitySelect($(this).val());
});

function setCitySelect(s){
  $('#citySelect').find('option').remove();
  $(c).each(function(i){
    if(c[i].state == s){
      $('#citySelect').append($('<option></option>')
        .attr('state', c[i].state)
        .val(c[i].city)
        .text(c[i].city));
      }
    }
  );

}

setCitySelect('HI');

});

まずオブジェクトの配列として、州と市のペアを定義しています。

次に州のドロップダウンボックスの change イベントハンドラを設定しています。この中で $(this).val() とすることによって、選択された新しいオプションの値を取得しています。 ここで取得できるのは州を表すコードです。これを (その下で定義している) setCitySelect 関数に渡しています。

setCitySelect 関数は州コード（ここでは "HI", "TX", "CA" のいずれか）を受け取ります。 はじめに市ドロップダウンに含まれる option 要素全てをを .find('option').remove() で削除します。 その後、ドロップダウンの append メソッドに $('<option></option>') として作成した option 要素を渡します。 またこのときに、state 属性を attr メソッドで、値を val メソッドで、表示される文字を text メソッドで設定しています。

このようにして、連動するドロップダウンボックスを作成することが可能です。