ajax省市区三级联动

页面导航:首页 > 软件编程 > Java编程 > ajax省市区三级联动

ajax省市区三级联动

来源: 作者: 时间:2016-01-21 09:39 【

area.html!DOCTYPE HTMLhtml head title ajax /title meta charset=utf-8/ script type=text/javascript ...
area.
 
<!DOCTYPE HTML>
<html>
    <head>
        <title> ajax </title>
        <meta charset="utf-8"/>
        <script type="text/javascript">
            var httpAjax = new XMLHttpRequest();
            function $(id){
                return document.getElementById(id);
            }
            // 获取省
            function getProvince(){
                httpAjax.onreadystatechange=function(){
                    if(httpAjax.readyState == 4 && httpAjax.status == 200){
                        var res = httpAjax.responseText;
                        res = eval("("+res+")");
                        var _html = "<option value=\"\">请选择...</option>";
                        for(var i in res){
                            _html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
                        }
                        $("province").innerHTML = _html;
                    }
                }
                httpAjax.open("post","area.php",false);
                httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
                httpAjax.send("");
            }
            // 加载完毕  设置选择省
            window.onload=function(){
                getProvince();
            }
            // 获取市
            function getCity(pid){
                if(pid == ""){
                    alert(1);
                    $("city").innerHTML = "<option value=\"\">请选择...</option>";
                    $("county").innerHTML = "<option value=\"\">请选择...</option>";
                    return false;
                }
                $("county").innerHTML = "<option value=\"\">请选择...</option>";
                httpAjax.onreadystatechange=function(){
                    if(httpAjax.readyState == 4 && httpAjax.status == 200){
                        var res = httpAjax.responseText;
                        res = eval("("+res+")");
                        var _html = "<option value=\"\">请选择...</option>";
                        for(var i in res){
                            _html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
                        }
                        $("city").innerHTML = _html;
                    }
                }
                httpAjax.open("post","area.php",false);
                httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
                var data = "id="+pid;
                httpAjax.send(data);
            }
            // 获取区县市
            function getCounty(cid){
                if(cid == ""){
                    $("county").innerHTML = "<option value=\"\">请选择...</option>";
                    return false;
                }
                httpAjax.onreadystatechange=function(){
                    if(httpAjax.readyState == 4 && httpAjax.status == 200){
                        var res = httpAjax.responseText;
                        res = eval("("+res+")");
                        var _html = "<option value=\"\">请选择...</option>";
                        for(var i in res){
                            _html += "<option value='"+res[i]['id']+"'>"+res[i]['name']+"</option>"
                        }
                        $("county").innerHTML = _html;
                    }
                }
                httpAjax.open("post","area.php",false);
                httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
                var data = "id="+cid;
                httpAjax.send(data);
            }
        </script>
    </head>
    <body style="padding:200px;">

            <select id="province" onchange="getCity(this.value)">
                <option value="">请选择...</option>
            </select>省
            <select id="city" onchange="getCounty(this.value)">
                <option value="">请选择...</option>
            </select>市
            <select id="county">
                <option value="">请选择...</option>
            </select>县/市/区
         
    </body>
</html>

 

 
 
area.php
 
<?php
    $pdo = new PDO(":host=localhost;dbname=tk106","root","admin");
    $pdo->exec("set names utf8");

    $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : "0";
    $sql = "select * from area where parentid=".$id;
    $data = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($data);

?>

 

 
 
Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <