jQuery‎ > ‎

selectタグのoption要素の選択、追加、削除

selectタグに対する操作についてあれこれ。

サンプルhtml

<select id="cn3">
  <option></option>
  <option value="00">00 : ゆりかご</option>
  <option value="01">01 : スピーカー</option>
  <option value="03">02 : 鬼目ナット</option>
</select>

指定の要素を選択する

value="03"の要素を選択状態にする。
$('#cn3').val('03');

option要素を動的に増減する

要素を追加したいとき

追加したい要素をベタで書く方法
$('#cn3').append($('<option value=""></option>'));
 
追加したい要素をパラメータに分解して書く方法
$('#cn3').append($('<option>').attr({ value: '値' }).text('選択肢の名前'));

要素を削除したいとき

要素を指定して削除する場合

'[value=??]'で削除する要素を指定します。"01"のスピーカーを削除するのであれば次のように書きます。
$('#cn3').children('[value=01]').remove();
 
value値の指定がされていない要素の場合は、そのまま素直に指定しなければよいようです。
$('#cn3').children('[value=]').remove();

全ての要素を削除する場合

$('#cn3').children().remove();

 

Comments