項目を自動入力させたくアドバイスをいただきたいのですが?http://aquz.jp/test1/postmail/postmail.htmlにおいて
「LOM名」を選ぶと下の5項目ぐらいが自動で入力されるようにしたいのですが煮詰まってしまいました。
javascriptにて100行程度の簡易的なDBファイル(aaa.js)を別途作成したのですが、呼び出し方法等がわかればありがたいのですが?ちなみにjsファイルの記述は
jsDB[0]="LOM名,郵便番号,事務局住所,事務局TEL,事務局FAX,・・・・";
となっております。
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var listAry = {"青年会議1":{"郵便番号":"9503122","住所":"甘木1丁目"},"青年会議2":{"郵便番号":"9503121","住所":"甘木2丁目"}}
function inputAry(val) {
// alert(val) ;
if(val != "") {
document.forms[0].elements[1].value = listAry[val]["郵便番号"] ;
document.forms[0].elements[2].value = listAry[val]["住所"] ;
}
}
</script>
</head>
<body>
<form>
<select onchange="inputAry(this[this.selectedIndex].value);">
<option value="" selected="selected">選択</option>
<option value="青年会議1">青年会議1</option>
<option value="青年会議2">青年会議2</option>
</select>
<input type="text" name="yubin"/>
<input type="text" name="jyusho"/>
</form>
</body>
</html>
こういうようなものを作ればいいと思うのですが、問題として100行もあるファイルを読み込ませるとブラウザに負担をかけないかということです。
Ajaxを利用して必要なデータのみ取り込むというのが妥当だと思いますが、いかがでしょう。
もっといえばデータベースを利用したほうが、データの増減変更が容易である。
それと上のスクリプトではわかりやすくするため連想配列を使っていますが、普通の配列のほうが軽いからいいと思います。
参考にしてください。
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/in...
ページを開いた段階で、まずaaa.jsに記述されているjsDBの内容をローカル配列に持つ必要があります。
後は、LOM名のセレクトのonchangeイベント発生時に、選択されてるLOM名の表示されている名前と一致するローカル配列を探し出します。
jsDBの中身がカンマ区切りなので、該当のカラムを取り出すのに、splitかなにかで分割してやらないといけませんね。
比較対象のカラムを取り出せたら、その文字列とLOM名の文字列を見比べて、同じならば、その行の内容を各コントロールにセットするという方法が簡単かなと思います。
自分の持っていた参考書のサンプルにそっくりなものがあったので、そのURLです。著作権フリーのはずなので、参考にしてみてください。
私もこのテキストを片手にやっておりました。参考にさせていただきます。
質問の目的は、以下のようなイメージでしょうか?間違っていたらごめんなさい。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
var jsDB = new Array();
function inputAry(val) {
:
}
:
// -->
</script>
<script src="./aaa.js" charset="utf-8"></script>
</head>
charset="utf-8" は、js ファイルのエンコーディングを指定します。
参考になれば幸いです。
ご回答ありがとうございます。参考にさせていただきます。
なるほど、早速いじってみます。