jQueryでoption要素を追加する方法
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」を追加して送信するサンプルを作ったのでお試しください。
Posted by yujiro このページの先頭に戻る
- jQuery+ajaxでモーダルのコンテンツを取得する方法
- jQueryでパスワードの表示・非表示を切り替えるサンプル
- jQueryでファイル選択時にプレビュー表示する方法
- ラジオボタンをjQueryで解除する方法
- テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
- jQueryで親ページからiframeのスクロールバーを非表示にする方法
- jQueryのカスタムビルドが簡単にできるサービス「jQuery Builder」
- jQueryでCSSをまとめて書き換える方法のまとめ
- 親ページからiframe内の要素にCSSを適用させる方法
- jQueryで要素を削除する方法のまとめ
- jQueryでテキストを追加するたびにスクロールさせる方法
- jQuery.ajax()でファイルをアップロードする方法
- preventDefault()で無効にしたイベントを有効にする方法
- jQueryで要素数を取得する方法のまとめ
- jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
トラックバックURL
コメントする
greeting