小粋空間  -  a cheap joke and a play on words site

jQueryでoption要素を追加する方法

jQueryでoption要素を追加する方法を紹介します。

１．option要素を追加する

次のselect要素があると仮定します。select要素には2つのoption要素が設定されています。

<select name="foo" id="foo">
  <option value="1">aaa</option>
  <option value="2">bbb</option>
</select>

これにvalue属性が「3」、コンテンツが「ccc」というoption要素を追加するには次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    var option = $('<option />');
    option.val(3);
    option.html('ccc');
    $('#foo').append(option);
});
</script>

option要素を生成します。

    var option = $('<option />');

生成したoption要素にvalue属性を設定します。

    option.val(3);

さらにコンテンツを設定します。

    option.html('ccc');

最後に、生成したoption要素をselect要素に追加します。

    $('#foo').append(option);

これで次のHTMLが作られることになります。

<select name="foo" id="foo">
  <option value="1">aaa</option>
  <option value="2">bbb</option>
  <option value="3">ccc</option>
</select>

メソッドチェーンを使えば、上記のjQueryは1行で書くことができます。

<script>
$(function(){
    $('#foo').append($('<option />').val(3).html('ccc'));
});
</script>

option要素の書き方ですが、jQuery1.3以前では要素を必ず閉じられていなければいけませんでしたが、1.4以降では閉じていなくても大丈夫になりました。

1.3以前の書式

$('<option />')

1.4以降の書式

$('<option>')
$('<option />')

ということで、現在はどちらの書式でも問題ありません。

２．追加したoption要素を選択状態にする

追加したoption要素を選択状態にするには、valメソッドを利用します。

<script>
$(function(){
    $('#foo').append($('<option />').val(3).html('ccc'));
    $('#foo').val(3);
});
</script>

３．option要素を追加せずに値だけ変更する

submit時にoption要素にない値に書き換えようと試みたのですが、option要素にない値を設定することはできません。

<form id="bar" method="get" action="index.php">
  <select name="foo" id="foo">
    <option value="1">aaa</option>
    <option value="2">bbb</option>
  </select>
  <input type="submit" value="送信" />
</form>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('#bar').submit(function(){
        $('#foo').val(3);
    });
});
</script>

option要素にない値を設定するには、submit前にoption要素を追加し、その値を選択するしかないようです。

ただし、submit時にプルダウンメニューの表示が一瞬書き換わる挙動になります。

submit時に冒頭の「ccc」を追加して送信するサンプルを作ったのでお試しください。

submit前に追加したoption要素の値に変更して送信するサンプル