Tad 教材網 - 線上書籍

:::

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/03.zip)

### 一、 TWzipcode官網：[http://app.essoduke.org/twzipcode](http://app.essoduke.org/twzipcode/)

1. 用途：可輸入郵遞區號，會自動生出縣市及鄉鎮市區，反之亦可。
2. 最新版為1.4.1有自動偵測功能，本例為1.3.1（有修改成可結合表單驗證程式），javascript部份設定（需先引入jquery）：
 ```
<pre class="brush: xhtml;" title="code">
<script language='javascript' src='class/twzipcode-1.3.1.js'></script>
<script type='text/javascript'>
  $(document).ready(function() {
    $('#AddrForm').twzipcode({
      countyName: '縣市欄位的name',
      areaName: '鄉鎮市區欄位的name',
      zipName: '郵遞區號欄位的name',
      countySel: '$縣市預設值',
      areaSel: '$鄉鎮市區預設值',
      zipSel: '$郵遞區號預設值',
      zipReadonly: false
    });
  });
</script>
```

4. 表單部份：
 ```
<pre class="brush: xhtml;" title="code">
<div style='position:relative;'>
 <span id='AddrForm'></span>
 <input type='text' name='addr' size='30' value='{$addr}' id='addr'>
</div>
```

### 二、 用選單切換內容

1. 利用下拉選單，選擇後，內容立即做出改變（不換頁）
2. 先處理一下表格，在要呈現內容的地方改為<tbody id='contact\_list'></tbody>
3. 然後利用jquery的$.post()方法把相關內容給抓出來，並塞到contact\_list中。
 ```
<pre class="brush: jscript;" title="code">
$('#menu2').change(function(){
    $.post('ajax.php' , {op: contact_list , gsn: $('#menu2').val()} , function(data){
        $('#contact_list').html(data);
    });
});
```

5. ajax.php裡可以根據op去執行相關函數，以抓出表格通訊錄內容。
 ```
<pre class="brush: php;" title="code">
$gsn=empty($_POST['gsn'])?0:$_POST['gsn'];
$op=empty($_POST['op'])?'':$_POST['op'];

switch($op){
    case "contact_list":
    echo contact_list($gsn);
    break;
}

function contact_list($gsn=''){
    //根據$gsn去資料庫撈出相關資料，基本上就是index.php的list_contact()函數內容
}
```

7. 一切換完選單就立即抓出資料：
 ```
<pre class="brush: jscript;" title="code">
$('#menu1').change(function(){
    $.post('ajax.php' , {parent_gsn: $('#menu1').val()} , function(data){
        $('#menu2').html(data);
        $.post('ajax.php' , {op: 'contact_list' , gsn: $('#menu2').val()} , function(data){
            $('#contact_list').html(data);
        });
    });
});
```

:::