TopJavaScriptjQuery > 2013年6月
2013年6月25日

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

June 25,2013 12:17 AM
Tag:[, , ]
Permalink

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要素の値に変更して送信するサンプル
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3