住所を表示する方法はいくつかありますが、まずは住所表示その1として、customer.htmlに直接表示してみます。
今回は例として顧客マスターを取り上げましたが、社員マスター、取引先マスターなどでも使い方は同じです。
住所を表示するプログラムを「address.js」としてまとめたのは他のマスターでも使えるようにするためです。customer.jsは住所の学習に絞るため、最小限のプログラムにしています。
【1】以下のように customer.html、customer.css、customer.js、address.js を作成します。base.css と database.js は前回までと共通です。
customer.html
<html>
<head>
<script type="text/javascript" src="database.js"></script>
<script type="text/javascript" src="address.js"></script>
<script type="text/javascript" src="customer.js"></script>
<link href="base.css" rel="stylesheet" type="text/css">
<link href="customer.css" rel="stylesheet" type="text/css">
<title>customer</title>
</head>
<body>
顧客マスター
<div id="prefDisplay"></div>
<div id="cityDisplay"></div>
<div id="townDisplay"></div>
<div id="addressDisplay"></div>
<form name="form1">
TOWN_CD:<input type="text" name="txtTownCd" id="txtTownCd">
ADDRESS:<input type="text" name="txtAddress" id="txtAddress">
</form>
</body>
</html>
customer.css
#selectPref {
width: 150px;
}
#selectCity {
width: 150px;
}
#selectTown {
width: 300px;
}
#txtaddress {
width: 250px;
}
customer.js
onload = init;
onunload = dbClose;
function init() {
dbConnect();
prefDisplay();
}
address.js
var prefCd;
var cityCd;
function prefDisplay(obj) {
//都道府県を表示する関数
var mySql = "select * from T01Prefecture order by PREF_CD";
var recordSet = database.Execute(mySql);
document.getElementById("prefDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectPref\" id=\"selectPref\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("prefDisplay").innerHTML = tempHtml;
document.getElementById("selectPref").onchange = function (){prefChange(this);}
recordSet.Close();
recordSet = null;
}
function prefChange(obj) {
//都道府県を選択した時の関数
prefCd = Number(obj.value);
cityDisplay();
document.getElementById("txtTownCd").value = "";
document.getElementById("addressDisplay").innerHTML = "";
document.getElementById("townDisplay").innerHTML ="";
}
function cityDisplay() {
//市町村を表示する関数
var mySql = "select CITY_CD,CITY_NAME from T02City where PREF_CD = " + prefCd + " order by CITY_CD" ;
var recordSet = database.Execute(mySql);
document.getElementById("cityDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectCity\" id=\"selectCity\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("cityDisplay").innerHTML = tempHtml;
document.getElementById("selectCity").onchange = function (){cityChange(this);}
recordSet.Close();
recordSet = null;
}
function cityChange(obj) {
//市町村を選択した時の関数
cityCd = Number(obj.value);
document.getElementById("txtTownCd").value = "";
document.getElementById("addressDisplay").innerHTML = "";
townDisplay();
}
function townDisplay() {
//地域を表示する関数
var mySql = "select TOWN_CD,TOWN_NAME from T03Town where CITY_CD = " + cityCd + " order by TOWN_CD" ;
var recordSet = database.Execute(mySql);
document.getElementById("townDisplay").innerHTML = "";
var tempHtml = "<select name=\"selectTown\" id=\"selectTown\">\n";
while (!recordSet.EOF){
tempHtml = tempHtml + "\t<option value=\"" + recordSet(0) + "\">" + recordSet(1) + "</option>\n";
recordSet.MoveNext();
}
tempHtml = tempHtml + "</select>";
//alert(tempHtml);
document.getElementById("townDisplay").innerHTML = tempHtml;
document.getElementById("selectTown").onchange = function (){townChange(this);}
recordSet.Close();
recordSet = null;
}
function townChange(obj) {
//地域を選択した時の関数
document.getElementById("txtTownCd").value = obj.value;
document.getElementById("addressDisplay").innerHTML = addressRefer(obj.value);
}
function addressRefer(townCd) {
//住所を表示する関数
var mySql = "SELECT ('〒' & ZIP_CODE & ' ' & PREF_NAME & CITY_NAME & TOWN_NAME) AS address ";
mySql = mySql + "FROM T03Town,T02City,T01Prefecture ";
mySql = mySql + "WHERE T03Town.CITY_CD = T02City.CITY_CD ";
mySql = mySql + "AND T02City.PREF_CD = T01Prefecture.PREF_CD ";
mySql = mySql + "AND TOWN_CD = " + townCd;
var recordSet = database.Execute(mySql);
var tempAddress = recordSet(0);
//recordSet.Close();
recordSet = null;
return tempAddress;
}
【2】保存したら customer.html をダブルクリックしてWebブラウザで開きます。
★customer.html、base.css、customer.css、database.js、customer.js、address.js は必ず同じフォルダ内に置いてください。
【3】顧客マスターが表示されました。都道府県の選択ボックスは表示されていますが、まだ市町村と地域は表示されていません。
【4】都道府県の選択ボックスで、「東京都」を選択します。
【5】市町村の選択ボックスで、「港区」を選択します。
【6】地域の選択ボックスで、「麻布十番」を選択
【7】住所が表示され、TOWN_CDにデータが自動で入力されることを確認してください。
ADDRESSには番地などを入力するだけです。顧客マスターにはTOWN_CDだけが保存されます。TOWN_CDがあれば郵便番号、都道府県、市町村、地域は参照により表示できます。
【解説】
html側で以下の6行を書いておくと、社員マスター、取引先マスターなどでも共通して使えます。
住所を表示するためのプログラムを読み込んでいます。
<script type="text/javascript" src="address.js"></script>
選択ボックスを表示する場所です。
<div id="prefDisplay"></div>
<div id="cityDisplay"></div>
<div id="townDisplay"></div>
住所を表示する場所です。
<div id="addressDisplay"></div>
TOWN_CDを表示するテキストボックスです。
TOWN_CD:<input type="text" name="txtTownCd" id="txtTownCd">
customer.js側はデータベースの接続と、都道府県コンボボックスの表示だけ行っています。
dbConnect();
prefDisplay();
address.jsはほとんど前回学習したtown.jsと同じですので、違う部分だけ解説します。
関数townChange()のobjは地域選択ボックスの参照が入っていますので、obj.valueでTOWN_CDが取得できます。テキストボックスtxtTownCdにはobj.valueをそのまま表示しています。テキストボックスaddressDisplayには関数addressRefer()の戻り値を表示しています。引数にobj.value(TOWN_CD)を指定しているところがポイントです。
function townChange(obj) {
//地域を選択した時の関数
document.getElementById("txtTownCd").value = obj.value;
document.getElementById("addressDisplay").innerHTML = addressRefer(obj.value);
}
関数addressRefer()はtownCdを抽出条件に住所を参照して文字列を返します。SQL文では文字列は「'」シングルクォーテーションで囲み、「&」アンパサンドでつなげます。最後にreturnで住所の文字列を呼び出し元に返しています。
function addressRefer(townCd) {
//住所を表示する関数
var mySql = "SELECT ('〒' & ZIP_CODE & ' ' & PREF_NAME & CITY_NAME & TOWN_NAME) AS address ";
mySql = mySql + "FROM T03Town,T02City,T01Prefecture ";
mySql = mySql + "WHERE T03Town.CITY_CD = T02City.CITY_CD ";
mySql = mySql + "AND T02City.PREF_CD = T01Prefecture.PREF_CD ";
mySql = mySql + "AND TOWN_CD = " + townCd;
var recordSet = database.Execute(mySql);
var tempAddress = recordSet(0);
//recordSet.Close();
recordSet = null;
return tempAddress;
}
コメントにしているのは、この文があるとうまくリターンできないからです。
//recordSet.Close();
関数addressRefer()でやっていることを、関数townChange()に直接書くこともできます。しかしTOWN_CDから住所を参照するプログラムはいろんな場面で使えます。
選択ボックスのvalueを抽出条件にしたいこともありますし、変数を抽出条件にしたいこともあります。そんな時に関数townChange()に直接書いていると使いにくいのです。そこで関数addressRefer()を作り、引数としてvalueや変数のどちらでも渡せるようにしています。
