<select id="province">    <option>请选择</option>  </select>  <select id="city">    <option>请选择</option>  </select>

/*     * 省份信息和城市信息全部来源于服务器端     * * 第一种思路 - 基于前一个案例     *   * 获取省份信息,使用一次Ajax的异步请求     *   * 根据省份信息,再次使用Ajax的异步请求     * * 第二种思路 - 重新思考     *   * 一次性将省份和城市获取     */    // a. 创建XMLHttpRequest对象    var xhr = getXhr();    // 第一种思路 - 基于前一个案例    // 1. 当页面加载时,实现Ajax的异步请求 - 省份信息    window.onload = function(){        // b. 建立连接 - open("get","07_province.php");        xhr.open("get","07_province.php");        // c. 发送请求 - send(null)        xhr.send(null);        // d. 接收服务器端的数据        xhr.onreadystatechange = function(){            if(xhr.readyState==4&&xhr.status==200){                var data =http://www.mamicode.com/ xhr.responseText;                // 将字符串转换为数组                var provinces = data.split(",");                // 遍历数组                for(var i=0;i<provinces.length;i++){                    // 创建option元素添加到id为province元素上                    var option = document.createElement("option");                    var text = document.createTextNode(provinces[i]);                    option.appendChild(text);                    var province = document.getElementById("province");                    province.appendChild(option);                }            }        }    };    // 2. 当用户选择省份信息时,实现Ajax的异步请求 - 城市信息    var province = document.getElementById("province");    province.onchange = function(){        // 清空        var city = document.getElementById("city");        var opts = city.getElementsByTagName("option");        for(var z=opts.length-1;z>0;z--){            city.removeChild(opts[z]);        }        if(province.value != "请选择"){            xhr.open("post","07_cities.php");            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            xhr.send("province="+province.value);            xhr.onreadystatechange = function(){                if(xhr.readyState==4&&xhr.status==200){                    var data =http://www.mamicode.com/ xhr.responseText;                    var cities = data.split(",");                    for(var i=0;i<cities.length;i++){                        var option = document.createElement("option");                        var text = document.createTextNode(cities[i]);                        option.appendChild(text);                        city.appendChild(option);                    }                }            }        }            };    //定义获取Ajax核心对象的函数    function getXhr(){        var xhr = null;        if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();        }else{            xhr = new ActiveXObject("Microsoft.XMLHttp");        }        return xhr;    }

<?php    echo ‘山东省,辽宁省,吉林省‘;?>

<?php    // 用于处理客户端请求二级联动的数据    // 1. 接收客户端发送的省份信息    $province = $_POST[‘province‘];    // 2. 判断当前的省份信息,提供不同的城市信息    switch ($province){        case ‘山东省‘:            echo ‘青岛市,济南市,威海市,日照市,德州市‘;            break;        case ‘辽宁省‘:            echo ‘沈阳市,大连市,铁岭市,丹东市,锦州市‘;            break;        case ‘吉林省‘:            echo ‘长春市,松原市,吉林市,通化市,四平市‘;            break;    }    // 服务器端响应的是字符串?>