jQueryを使ってselectタグ内にoptionを追加する方法 -Ajaxもあるよ-

こんにちは、ヱビス(@evisu0414)です。

Ajaxを利用したプログラムを作ることも、サーバーサイドエンジニアに求められることが多いです。

今回は、Ajaxを使って、selectタグの中身を書き換えるサンプルをご紹介します。

作る前の前提条件

想定する場面は下記のとおりです。

■想定する状況
(1)selectタグが2つある。
(2)1つ目のselectを変更すると、選択内容に応じた、2つ目のselectを表示させる。
(3)2つ目のselectタグ内の要素は、動的に取得する。

ベースとなるHTML

基本となるHTMLを用意します。

<div>SNS</div>
<select id="sns_id" name="sns_id">
	<option value="">----</option>
	<option value="1">Facebookアカウント</option>
	<option value="2">Twitterアカウント</option>
</select>

<br>

<div>アカウント</div>
<select id="account_id" name="account_id">
	<option value="">----</option>
</select>

イメージとしては、「SNSのプルダウン」を選択すると「アカウントのプルダウン」が動的に変わるというものです。

jQuery(JavaScript)側の処理

次に、このプログラムを動かすためのJavaScriptを用意します。
前提として「jQuery」が読み込まれているものとします。

$(function () {
	 //changeを使って、プルダウンの変更をトリガーとする
	 $('#sns_id').on('change', function () {
	 		var $snsId = $(this).val();
	 		
	 		$.ajax({
				async: false,// 同期処理
                url: '実行したいプログラムURL',
                type: "POST",
                dataType: 'json',
                data: {
                	"sns_id": $snsId
                }
            }).done(function (data, status, xhr) {
            	//「アカウント」のSELECT内容を更新
                $('#account_id').html("<option value=''>----</option>");
                
                $.each(data, function (i, val) {
                	//optionタグを「----」の後ろに追加
                	$('#account_id').append($("<option>").val(val.account_id).text(val.name));
                });

            }).fail(function (xhr, status, error) {
            	// 通信失敗時のエラーをログとして出力
                console.log(error);
            });
	 });
});

Ajax処理の部分は、実際のプログラムに応じて変更をしてください。

解説

いくつか、特徴的な部分もあるので解説します。

変数を見分ける目印

「おや?」と思われた方もいると思いますが、私はJavaScriptの変数にPHPと同様の「$」を付けるようにしています。

JavaScriptは、「$」を特殊文字とは認識せず、単なる英文字の1つとして認識する特性があります。

そのため、個人的に変数の目印として、PHP同様、変数の先頭に付けてひと目見て分かるようにしています。

#account_id内を初期化

$('#account_id').html("<option value=''>----</option>");

この部分で、selectタグ内の内容を初期化しています。

以前にあったoptionタグが残っていると、古いものと新しいものが混ざってしまうので、一旦初期化をします。

$.eachを使って繰り返し処理

PHPer大好き「foreach」の代わりとして、jQueryで使えるのが「$.each」です。

サーバーサイド側で処理した結果(戻り値として「配列」を想定)を、ループで出力します。

戻り値は「data」変数に保存されています。

ただ、「data」変数にどれくらいあるかがハッキリしないので、forを使わず「$.each」にしています。

「val.account_id」と「val.name」に関しては、サーバーサイド側で処理した結果なので、プログラムの書き手によって変わりますのでので、必要に応じて変更してください。

プログラマ的なHTMLの書き方

自動的にHTMLを作成する方法は、いくつかあると思います。

プログラム的に書きやすいのは「$(“<option>”).val(val.account_id).text(val.name)」という書き方です。

「$(“<option>”)」のvalueに「val.account_id」の値を設定して、テキストとして「val.name」を入れます。

結果として「<option value=”[val.account_id]”>[val.name]</option>」が出力されます。

まとめ

Ajaxを使った、フロントエンドコーディングの需要は高まるばかりです。

selectタグの操作方法の1つとして、利用するときのヒントになれば幸いです。