柠檬铺

级联下拉菜单就是从一个下拉菜单中选中一项后，相应的另一个下拉菜单的内容会随之改变。    一般来说，最简单的，就是每次选中都提交一次表单，刷新整个页面。这也是用户体验度最差的。
    另一种是把所有选项在第一次加载时就全部载入整个页面中的 javascript 数组中，然后级联通过 JavaScript 来控制，在整个数据量不大时，这是一个不错的实现无刷新并且快速的方法，但是当整个数据量非常大时，这种方法就会使第一次加载变得非常慢了。
    还有就是采用 Ajax 方式，即开始只载入第一层菜单的内容，当用户选中第一层菜单的某项时，再通过 XmlHttpRequest 来获取相应选项所对应的第二层菜单的内容。这种方式效果最好，但是采用传统方式来编写这样的 Ajax 程序代码量会比较多。而且如果设计不好，服务器端返回菜单内容的程序的可复用性也会很差。
    但是在本文中你会看到用 PHPRPC 来实现这种 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（'phprpc_server.php'）；
    new phprpc_server（array（'get_province', 'get_city'））；
    ?>
    其中最后一句，就是指定哪些函数要暴露给客户端。只有指定的函数客户端才可以调用，这样可以保证服务器的安全性。
    服务器端到此就创建完了。你会发现服务器端只负责把数据查询出来返回给客户端就完事了，其它的不做任何处理。
    那么下面该看一看客户端了，客户端虽然很简单，但是我还是把它分成了两个文件，一个 js 文件，一个 html 文件，你会发现用 PHPRPC，客户端都不需要用 PHP。
    下载： area.js
    // 创建 phprpc 客户端对象 rpc
    phprpc_client.create（'rpc'）；
    var city = []; // 用于缓存已加载的城市数据
    /*
    * 清除 select 中的选项，该方法可复用
    *
    * so: 要清除选项的 select 对象
    *
    */
    function clear_select（so） {
    for （var i = so.options.length - 1; i > -1; i--） {
    // 有些浏览器不支持 options 属性的 remove 方法，
    // 但支持 DOM 的 removeChild 方法（比如：Konqueror）
    if （so.options.remove） {
    so.options.remove（i）；
    }
    else {
    so.removeChild（so.options[i]）；
    }
    }
    }
    /*
    * 设置 select 中的选项，该方法可复用
    *
    * so: 要设置选项的 select 对象
    * d: 选项数据数组
    * vf: 选项值所对应的数组中的字段名
    * tf: 选项文本所对应的数组中的字段名
    */
    function set_select（so, d, vf, tf） {
    for （var i = 0, n = d.length; i < n; i++） {
    var opt = document.createElement（'option'）；
    opt.text = d[i][tf];
    opt.value = d[i][vf];
    // 有些浏览器不支持 options 属性的 add 方法，
    // 但支持 DOM 的 appendChild 方法（比如：Konqueror）