« 町域(町名)での出張料金検索-1 | トップページ | 郵便番号か町域(町名)での出張費検索 »

2013年8月15日 (木)

町域(町名)での出張料金検索-2

昨日の画面から、一部重複データを加えたテーブルに変更してあります。

Photo 市区町村の選択は、

select選択ボックスを動的に作る 

を参考にさせて頂きました。

以前に作成した、ブログのタイトル表示や郵便番号での料金検索も選択ボックスの作成に役立ちました。

 

 

 

 

 

 

実際のコマンドや、データの扱い方などは、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に残してあります。

« 町域(町名)での出張料金検索-1 | トップページ | 郵便番号か町域(町名)での出張費検索 »

ホームページの修正」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: 町域(町名)での出張料金検索-2:

« 町域(町名)での出張料金検索-1 | トップページ | 郵便番号か町域(町名)での出張費検索 »

スライムパンク防止剤被害

川越市周辺の自転車屋MAP

埼玉県内出張修理店情報

ブログランキング

カテゴリー

無料ブログはココログ