昨日の画面から、一部重複データを加えたテーブルに変更してあります。
市区町村の選択は、
を参考にさせて頂きました。
以前に作成した、ブログのタイトル表示や郵便番号での料金検索も選択ボックスの作成に役立ちました。
実際のコマンドや、データの扱い方などは、Web チュートリアルのJavaScript 及び HTML DOM リファレンスを参考にさせて頂きました。
町域(町名)の入力では、大字をつける方、地番まで入力される方が、居られる想定で、入力を検索可能なデータに変換する処理を入れています。
チェックはこちらを参考にしました。
実装するには、先の郵便番号での選択も生かして置きたいので、入力の案内などと併せてまだ修正が必要ですが、此処までの作業を公開しておきます。
【Head部script】
var tyouiki;//町域設定
function tyouiki_f(){
if (document.js.city_list.value == "(市区町村)" || document.js.city_list.value == "" || document.js.tyouiki_in.value == "") {
alert("市区町村を選択してください。");
return;
}
}
function hyoji(){//http://faq.creasus.net/04/0422/を参考
var table = document.getElementById('ryokin') //tableを取得
var tr = table.getElementsByTagName("tr"); //<table>内の<tr>を全部取得(配列):DOM
//町域の入力修正
tyouiki=document.js.tyouiki_in.value
tyouiki=tyouiki.replace("大字","")
tyouiki=tyouiki.replace("字","")
tyouiki=tyouiki.replace("-","")
tyouiki=tyouiki.replace("-","")
tyouiki=tyouiki.replace(" ","")
tyouiki=tyouiki.replace(" ","")
tyouiki=tyouiki.replace( /[0-9]+/,"")
tyouiki=tyouiki.replace( /[0-9]+/,"")
// alert(tyouiki);
for( i = 0; i < table.rows.length; i++ ){
td = tr[i].getElementsByTagName("td"); //i番目の<tr>内にある<td>を全部取得(配列)
// alert(td[2].firstChild.data);
// alert(tyouiki);
if(tyouiki == td[2].firstChild.data && document.js.city_list.value ==td[0].firstChild.data){ //町域を比較
if(td[4].firstChild.data == "範囲外"){
alert( td[0].firstChild.data + td[2].firstChild.data + "までの距離は" + td[3].firstChild.data + "です。" + "\n申し訳ありませんが、出張 " + td[4].firstChild.data + " です。");
}
else {
alert( td[0].firstChild.data + td[2].firstChild.data + "までの距離は" + td[3].firstChild.data + "です。" + "\n出張料金は " + td[4].firstChild.data + " です。");
}
return;
}
}
alert("申し訳ありません。お住まいの地域の情報を見つけることが出来ませんでした。\nご連絡頂ければ、こちらでお調べいたします。");
}
【Body部Script】
// 最初の分類リスト (市区町村リスト)を作成
var city="(市区町村)";
var table = document.getElementById('ryokin'); //tableを取得
var tr = table.getElementsByTagName("tr"); //<table>内の<tr>を全部取得(配列):DOM
for( i = 0; i < table.rows.length; i++ ){
td = tr[i].getElementsByTagName("td"); //i番目の<tr>内にある<td>を全部取得(配列):DOM
var add_data=td[0].firstChild.data
// 配列のデータ作成
if (city.indexOf(add_data) < 0){//重複の排除
city=city + ","+ td[0].firstChild.data
}
}
var list = city.split(",");//配列に変換
// 市区町村の選択リストを作成
for( var i=0; i < list.length; i++){
addSelOption (js.elements['city_list'] , list[i], list[i]);
}
// 選択ボックスに選択肢を追加する関数
// 引数: ( selectオブジェクト, value値, text値)
function addSelOption( selObj, myValue, myText ){
selObj.length++;
selObj.options[ selObj.length - 1].value = myValue ;
selObj.options[ selObj.length - 1].text = myText;
}
動作確認用に作成した、WEBページは
http://www.anocora.com/anocora/newpage18.htmlに残してあります。
最近のコメント