級聯下拉菜單就是從一個下拉菜單中選中一項後，相應的另一個下拉菜單的內容會隨之改變。
一般來說，最簡單的，就是每次選中都提交一次表單，刷新整個頁面。這也是用戶體驗度最差的。
另一種是把所有選項在第一次加載時就全部載入整個頁面中的 JavaScript 數組中，然後級聯通過 JavaScript 來控制，在整個數據量不大時，這是一個不錯的實現無刷新並且快速的方法，但是當整個數據量非常大時，這種方法就會使第一次加載變得非常慢了。
還有就是采用 ajax(動態網站靜態化) 方式，即開始只載入第一層菜單的內容，當用戶選中第一層菜單的某項時，再通過 xml(標准化越來越近了)HttpRequest 來獲取相應選項所對應的第二層菜單的內容。這種方式效果最好，但是采用傳統方式來編寫這樣的 ajax(動態網站靜態化) 程序代碼量會比較多。而且如果設計不好，服務器端返回菜單內容的程序的可復用性也會很差。
但是在本文中你會看到用 php(做為現在的主流開發語言)RPC 來實現這種 ajax(動態網站靜態化) 效果是多麼的簡單，並且還會具有非常高的可復用性。
本文以省市兩級級聯下拉菜單為例，為了舉例方便，本文中采用的是 SQLite 數據庫，因為這個文件型數據庫比較容易部署，而且查詢效率很高（當然創建該數據庫的效率不高，但創建僅一次而已，該數據庫在該程序中內容是不變的），不過服務器需要安裝 SQLite 擴展。
這個數據庫中的表只有 2 個，一個 province 表，一個 city 表。province 表中，只有 id 和 name 兩個字段，分別是省份編號（主鍵）和省名。city 表中，有 id、name 和 pid 三個字段，id 是城市編號，name 是城市名，pid 是城市所在省的編號，與 province 表中的省份編號相對應。
創建該數據庫的程序這裡就不給出來了，它包含在後面提供的實例下載中。
下面來看看創建這個程序的服務器端有多麼簡單，為了提高可復用性，我們把服務器端分為了 2 個文件，一個是 function.php(做為現在的主流開發語言)，另一個是 rpc.php(做為現在的主流開發語言)。function.php(做為現在的主流開發語言) 中定義了實際的遠程調用函數，但是他們也可以作為服務器端的本地函數調用，你會發現他們跟服務器端的普通函數沒有任何區別：
下載: function.php(做為現在的主流開發語言)
<?php(做為現在的主流開發語言)
$sqlite = new SQLiteDatabase(area.db);
function get_province() {
global $sqlite;
$sql = "select * from province order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}
function get_city($pid) {
global $sqlite;
$pid = sqlite_escape_string($pid);
$sql = "select * from city where pid = $pid order by id";
return $sqlite->arrayQuery($sql, SQLITE_ASSOC);
}
?>
而 rpc.php(做為現在的主流開發語言) 更加簡單，它是提供給客戶端調用的接口，它只有 3 行語句：
下載: function.php(做為現在的主流開發語言)
<?php(做為現在的主流開發語言)
require_once(function.php(做為現在的主流開發語言));
require_once(php(做為現在的主流開發語言)rpc_server.php(做為現在的主流開發語言));
new php(做為現在的主流開發語言)rpc_server(array(get_province, get_city));
?>
其中最後一句，就是指定哪些函數要暴露給客戶端。只有指定的函數客戶端才可以調用，這樣可以保證服務器的安全性。
服務器端到此就創建完了。你會發現服務器端只負責把數據查詢出來返回給客戶端就完事了，其它的不做任何處理。
那麼下面該看一看客戶端了，客戶端雖然很簡單，但是我還是把它分成了兩個文件，一個 js 文件，一個 html 文件，你會發現用 php(做為現在的主流開發語言)RPC，客戶端都不需要用 php(做為現在的主流開發語言)。
下載: area.js
// 創建 php(做為現在的主流開發語言)rpc 客戶端對象 rpc
php(做為現在的主流開發語言)rpc_client.create(rpc);
var city = []; // 用於緩存已加載的城市數據
/*
* 清除 select 中的選項，該方法可復用
*
* so: 要清除選項的 select 對象
*
*/
function clear_select(so) {
for (var i = so.options.length - 1; i > -1; i--) {
