省市二級聯(lián)動小案例講解

    在網(wǎng)頁開發(fā)過程中，選擇省市的時候，省市之間有關(guān)聯(lián)，這是一個小小的二級聯(lián)動案例 ，運用到HTML、css、php、js以及AJAX的異步請求
    首先建立city.php和province.php文件和connet.html，將二級聯(lián)動的大概結(jié)構(gòu)寫出來，html代碼如下：
    <label>省份:</label>
    <select id="province">
    <option>請選擇</option>
    </select>
    <label>城市:</label>
    <select id="city">
    <option>請選擇</option>
    </select>
    js代碼以及ajax請求如下：
    <script>
    // 通過Ajax從服務(wù)器端獲取數(shù)據(jù)
    var provinceElement = document.getElementById("province");
    window.onload = function(){
    // 創(chuàng)建核心對象
    var xhr = getXhr();
    // 監(jiān)聽
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    //吉林省,遼寧省,山東省
    var data = xhr.responseText;
    // 處理數(shù)據(jù)
    var arr = data.split(',');
    for(var i=0;i<arr.length;i++){
    // <option>請選擇</option>
    var opt = document.createElement("option");
    var text = document.createTextNode(arr[i]);
    opt.appendChild(text);
    provinceElement.appendChild(opt);
    }
    }
    }
    // 建立連接
    xhr.open("get","province.php");
    // 發(fā)送數(shù)據(jù)
    xhr.send(null);
    }
    // 2. 用戶選擇不同的省份
    provinceElement.onchange = function(){
    // a. 清除城市列表
    var cityElement = document.getElementById("city");
    var opts = cityElement.getElementsByTagName("option");
    for(var i=1;i<opts.length;i++){
    cityElement.removeChild(opts[i]);
    i--;
    }
    // b. 得到用戶選擇的值(省份)
    var provinceValue = this.value;
    if(provinceValue == "請選擇"){
    return false;
    }
    // c. 通過Ajax根據(jù)省份獲取城市
    var xhr = getXhr();
    xhr.open("post","city.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("province="+provinceValue);
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
    var data = xhr.responseText;
    var arr = data.split(",");
    for(var i=0;i<arr.length;i++){
    // <option>城市</option>
    var opt = document.createElement("option");
    var text = document.createTextNode(arr[i]);
    opt.appendChild(text);
    cityElement.appendChild(opt);
    }
    }
    }
    }
    function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
    }
    </script>
    province.php代碼如下：
    <?php
    // 將省份信息進(jìn)行響應(yīng)
    echo '吉林省,遼寧省,山東省';
    ?>
    city.php代碼如下：
    <?php
    // 1. 接收客戶端的請求數(shù)據(jù)
    $province = $_POST['province'];
    // 2. 根據(jù)省份的不同,提供不同的城市
    switch ($province){
    case '吉林省':
    echo '長春市,松原市,白山市,通化市,遼源市';
    break;
    case '遼寧省':
    echo '沈陽市,大連市,錦州市,鐵嶺市,丹東市';
    break;
    case '山東省':
    echo '濟(jì)南市,青島市,威海市,日照市,德州市';
    break;
    }
    最終的界面圖如下：
    
    以上所述是小編給大家介紹的省市二級聯(lián)動小案例，希望對大家有所幫助