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

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

Posted at June 25,2013 12:17 AM
Tag:[jQuery, option, select]

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

1.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 />')

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

2.追加したoption要素を選択状態にする

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

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

3.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要素の値に変更して送信するサンプル
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)