jQuery ajax の JSON としての処理と SELECT エレメントの動的作成

jQuery を使った ajax の処理で、サーバー側からコンボボックスの内容を JSON として読みだして、SELECT 要素の中に動的に OPTION 要素を作成します。

dataType : "json"

もどされるデータがそのまま JSON オブジェクトとして jQuery 側で作成してくれていますので、グローバルな変数として window.mydata = result; を実行して再利用可能にしています。

まず、エレメントを作成してから jQuery のオブジェクトに変換して処理しています。

▼ op は DOM のエレメント
op = document.createElement("option");

▼ $(op) は、jQuery のオブジェクト
$(op).attr("value", i+1);

▼ OPTION要素にテキストノードを追加
$(op).append(window.mydata.ken[i]);

▼ SELECT 要素に DOM エレメントを追加
$("#target1").append(op);

最後に、jQuery を使って、コンボボックスの任意のデータを選択状態にしています。これは、一般的な記述で書くと、documnet.getElementById("target1").selectedIndex = 27 になります。

もうひとつのコンボボックス

比較の為に、県のデータを JavaScript の変数として直接定義して処理しています。

<style type="text/css">
#target1 {
	width: 200px;
	border-radius: 6px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

	$.ajax({
	// javascript の実行分を書いたテキストを呼び出す
		url: "http://lightbox.on.coocan.jp/ken.php",
		cache: false,
		dataType: "json"
	}).done( function( result, textStatus, jqXHR ) {
		// result がそのまま JSON オブジェクトです
		window.mydata = result;
		var op = null;
		// 空のオプション( 文字列を使用 )
		$("#target1").append("<option value='0'></option>");
		for( var i = 0; i < window.mydata.ken.length; i++ ) {
			op = document.createElement("option");
			$(op).attr("value", i+1);
			$(op).append(window.mydata.ken[i]);
			$("#target1").append(op);
		}

		// JavaScript 用プロパティなので、attr で実行するとエラー 
		$("#target1").prop("selectedIndex",27);
		// $("#target1").get(0).selectedIndex = 27; // DOM を使う場合

	});
});

window.myData2 = { "ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]};

$( function() {
	var op = null;
	// 空のオプション( 文字列を使用 )
	$("#target2").append("<option value='0'></option>");
	for( var i = 0; i < window.myData2.ken.length; i++ ) {
		op = document.createElement("option");
		$(op).attr("value", i+1);
		$(op).append(window.myData2.ken[i]);
		$("#target2").append(op);
	}

	// JavaScript 用プロパティなので、attr で実行するとエラー 
	$("#target2").prop("selectedIndex",1);
	// $("#target2").get(0).selectedIndex = 1; // DOM を使う場合

});


</script>
<select id="target1">
</select>
<hr />
<select id="target2">
</select>

jsdo.it での実行
jsdo.it でのソースコード

以下はコンボボックス用のデータをクロスドメインで呼び出す事を想定しているコードです。このコードを使うには、IE は IE10 である必要があります。

<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

Access-Control-Allow-Origin: * によってクロスドメインが可能になりますが、XMLHttpRequest で処理するには IE は IE10 である必要があります。IE9(IE8) でクロスドメインの呼び出しは、XDomainRequest を使用する必要があります。

IE9(IE8) は、インターネットの設定(「ドメイン間でのデータソースのアクセス」を有効)を行うと、無条件にクロスドメインの処理ができるようになります。但し、その場合でも jQuery を使う場合は $.ajax を実行する前に $.support.cors = true を実行する必要があります。


関連する記事

prototype.js でクロスドメインの Ajax の読み込みテスト

Ajax:jQuery

jQuery ajax テキスト取得テンプレート

jQuery の $.get と $.post と PHP の json_encode で、フォームデータをサーバのテキストファイルとして読み書き

JavaScript の function を外部に置いて、jQuery の ajax で読み出して SCRIPT 要素の innerHTML で動的に関数定義する

jQuery : $.get と $.post の内部事情( 正しい引数の与え方 )

$.ajax({}).then( doneCallbacks, failCallbacks ); のテスト