ThinkPHP + Ajax 實現二級聯動下拉選單完整教學

資料庫設計

CREATE TABLE `cate` (
  `ca_id` int(11) NOT NULL AUTO_INCREMENT,
  `ca_name` varchar(50) NOT NULL,
  `ca_pid` int(11) NOT NULL DEFAULT 0, -- 0 為頂層
  PRIMARY KEY (`ca_id`)
);

後端控制器

// 首頁：獲取頂層分類
public function index() {
    $cate = M('cate')->where(['ca_pid' => 0])->select();
    $this->assign('cate', $cate);
    $this->display();
}

// Ajax 介面：獲取子分類
public function getChildren() {
    $pid = I('post.pid', 0, 'intval');
    $list = M('cate')->where(['ca_pid' => $pid])->field('ca_id,ca_name')->select();
    $this->ajaxReturn($list, 'JSON');
}

模板 (HTML + JavaScript)

<select id="cate1" name="cate1">
  <option value="">請選擇一級分類</option>
  <volist name="cate" id="v">
    <option value="{$v.ca_id}">{$v.ca_name}</option>
  </volist>
</select>

<select id="cate2" name="cate2" disabled>
  <option value="">請先選擇一級分類</option>
</select>

<script src="/Public/js/jquery.min.js"></script>
<script>
$('#cate1').on('change', function() {
    var pid = $(this).val();
    $('#cate2').prop('disabled', true).html('<option>載入中...</option>');

    if (!pid) {
        $('#cate2').html('<option>請先選擇一級分類</option>');
        return;
    }

    $.post('__APP__/Index/getChildren', {pid: pid}, function(data) {
        var html = '<option value="">請選擇二級分類</option>';
        $.each(data, function(i, v) {
            html += '<option value="' + v.ca_id + '">' + v.ca_name + '</option>';
        });
        $('#cate2').prop('disabled', false).html(html);
    }, 'json');
});
</script>

關鍵點解析

• I('post.pid')：ThinkPHP 安全輸入獲取，自動過濾。
• ajaxReturn()：自動設置 Content-Type: application/json 並 exit。
• 前端 change 事件比 click 更合適（鍵盤操作也會觸發）。
• 請求失敗時應給予用戶提示（.fail() 處理）。

原生 PHP 版 Ajax 回應

// 無框架時
$pdo = new PDO(...);
$stmt = $pdo->prepare('SELECT ca_id, ca_name FROM cate WHERE ca_pid = ?');
$stmt->execute([$_POST['pid']]);
header('Content-Type: application/json');
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

擴展：三級聯動

同理新增 cate3，監聽 cate2 的 change 事件，傳遞 ca_pid 為 cate2 的值即可。