2011年6月30日 星期四

[jQuery]縣市連動下拉選單(縣市合併郵遞區號前三碼)

郵遞區號已更正~已打包完成~請於連結下載~如有發現錯誤
請告知~中華郵政目前只看到3+2碼對照~

參考網址:http://www.powerweb.tw/modules/news/V98

由於縣市合併後舊式的下拉選單選擇縣市資料都要要更新,要一筆一筆對照然後更改有些累人(懶)
 就去找了"縣市合併新版 3 碼郵遞區號 MySQL 匯入檔",
參考網址:http://www.powerweb.tw/modules/news/V99

 把資料庫整理了下,在自己利用jQuery寫了底下縣市下拉選單功能帶入郵遞區號,也順便把整理後的MySql資料庫匯出


展示頁程式碼

<?php
include 'Include/open.php';
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //利用jQuery的ajax把縣市編號(CNo)傳到Town_ajax.php把相對應的區域名稱回傳後印到選擇區域(鄉鎮)下拉選單
                $('#myCity').change(function(){
                    var CNo= $('#myCity').val();
                    $.ajax({
                        type: "POST",
                        url: 'Town_ajax.php',
                        cache: false,
                        data:'CNo='+CNo,
                        error: function(){
                            alert('Ajax request 發生錯誤');
                        },
                        success: function(data){
                            $('#myTown').html(data);
                            $('#myZip').val("");//避免重新選擇縣市後郵遞區號還存在,所以在重新選擇縣市後郵遞區號欄位清空
                        }
                    });
                });
                //根據選擇區域(鄉鎮)的編號傳到Zip_ajax.php把區域對應的郵遞區號印到指定的郵遞區號欄位
                $('#myTown').change(function(){
                    var TNo= $('#myTown').val();
                    $.ajax({
                        type: "POST",
                        url: 'Zip_ajax.php',
                        cache: false,
                        data:'TNo='+TNo,
                        error: function(){
                            alert('Ajax request 發生錯誤');
                        },
                        success: function(data){
                            $('#myZip').val(data);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align=center>    
            <tr> 
                <td width="113" height="28">通訊地址:</td>
                <td height="28" colspan="3">
                    <select name="F_I_CNo" id="myCity">
                        <option value="">選擇縣市</option>
                        <?php
                        $City = "select * from City where State=0";
                        $City_rs = mysql_query($City);
                        while ($City_rows = mysql_fetch_array($City_rs)) {
                            ?>
                            <option value="<?php echo $City_rows["AutoNo"] ?>"><?php echo $City_rows["Name"]; ?></option>
                            <?php
                        }
                        ?>
                    </select>
                    <select name="F_I_TNo" id="myTown">
                        <option value="">選擇鄉鎮</option>
                    </select>
                    郵遞區號:
                    <input id="myZip" type="text" class="field10" Name="F_S_NH_Zip" value="" size="5" readonly="ture"/>
                    地址:
                    <input type="text" class="field10" Name="F_S_NH_Address" value="" style="width:210px;"/>
                </td>
            </tr>
        </table>
    </body>
</html>


Town_ajax.php(回傳區域(鄉鎮)的內容)程式碼

<?php
include 'Include/open.php';
$Town = "select * from Town where CNo='" . $_POST["CNo"] . "'";
$Town_rs = mysql_query($Town);
$Town_num = mysql_num_rows($Town_rs);
if ($Town_num > 0) {//縣市編號帶入後如果有資料存在顯示底下區域內容回傳
    echo "<option value=''>選擇鄉鎮</option>";
    while ($Town_rows = mysql_fetch_array($Town_rs)) {
        echo "<option value='" . $Town_rows["AutoNo"] . "'>" . $Town_rows["Name"] . "</option>";
    }
} else {//縣市編號帶入後如果有資料存在顯示底下內容回傳
    echo "<option value=''>選擇鄉鎮</option>";
}
?>

Zip_ajax.php(回傳郵遞區號資料)程式碼

<?php
include("Include/open.php");
$Zip = "select * from Town where AutoNo='" . $_POST["TNo"] . "'";
$Zip_rs = mysql_query($Zip);
$Zip_num = mysql_num_rows($Zip_rs);
if ($Zip_num > 0) {//區域(鄉鎮)編號帶入後如果有資料存在顯示底下郵遞區號內容後回傳
    $Town_rows = mysql_fetch_array($Zip_rs);
    echo $Town_rows["Post"];
} else {
    echo "無資料";
}
?>


如果有錯誤的地方請告知^.^

檔案打包下載(包含資料庫)

8 則留言:

拉斯 提到...

感謝~
我打包走ㄌ喔~

匿名 提到...

有很多錯的...
例如新北市中和區是235...
你的資料是205..

Unknown 提到...

RE:
匿名提到...

有很多錯的...
例如新北市中和區是235...
你的資料是205..

-----------------------------------

你好~謝謝糾正~在下有控在跟
中華郵政
對照下....(這可真累人)

Unknown 提到...

我帶走了 謝謝您

Unknown 提到...

謝謝大大 太感動拉 好人好人^^

Unknown 提到...

大大 您的輸出都是數字 有辦法輸出 在option 輸出的是text嗎


我十分需要您的幫忙 q"q

Unknown 提到...

@Mack Wen
根據你所說的 需求....
應該只需要把 value='".$Town_rows["AutoNo"]."' 帶入的值換成
value='".$Town_rows["Name"]."'


您說的 "在option 輸出的是text嗎 ",有點模糊,不是很清楚你要的是不是這個

匿名 提到...

感謝分享,下載參考學習!!