スポンサードリンク

住所表示 その1

住所はいろんなマスターに利用できます。顧客マスター、社員マスター、取引先マスターなど住所が必要なものは結構あります。それぞれのマスターごとに住所を表示するためのプログラムを書くと重複してムダですので、共通して使う方法を紹介します。

住所を表示する方法はいくつかありますが、まずは住所表示その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】顧客マスターが表示されました。都道府県の選択ボックスは表示されていますが、まだ市町村と地域は表示されていません。

javascript-95.gif


【4】都道府県の選択ボックスで、「東京都」を選択します。

javascript-96.gif


【5】市町村の選択ボックスで、「港区」を選択します。

javascript-97.gif


【6】地域の選択ボックスで、「麻布十番」を選択

javascript-98.gif


【7】住所が表示され、TOWN_CDにデータが自動で入力されることを確認してください。

javascript-99.gif

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や変数のどちらでも渡せるようにしています。

スポンサードリンク






JavaScript初心者入門講座TOPへ