ITPub博客

首页 > > > javascript用ajax实现省市区的三级联动

javascript用ajax实现省市区的三级联动

作者:amadan 时间:2019-09-09 14:15:14 0 删除 编辑
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>三级联动js版</title>
    </head>
    <body>
        <select name='prov'>
        </select>
        <select value='市'>
        </select>
        <select value='区'>
        </select>
    </body>
  <script>
            elc =document.getElementsByTagName('select');
            elc_1 = elc[0];
            //创建ajax
            var obj=null;
            try{
                obj =new XMLHttpRequest();
            }catch(ie){c
                try{
                    obj = new ActiveXObjecti("Msxml2.XMLHTTP");
                }catch(ied){
                    obj = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            obj.open("GET","./sjld.php?fid=1");
            obj.onreadystatechange=function(){
                if(obj.readyState==4 && obj.status==200){
                }else{
                    flags = obj.responseText;
                }
                 flages = eval (flags);
                 for(var i=0;i<flages.length;i++){
                    opt=document.createElement('option');
                    opt.text = flages[i].name;
                    opt.value =flages[i].id;
                    //alert(opt.value);
                    elc_1.appendChild(opt);
                 }
            }
            obj.send();
            alert(elc_1.options.length);
            //alert("JSON");
</script>
</html>

PHP代码

<?php
    $dsn="mysql:host=localhost;dbname=meclass";
    $name = "root";
    $pwd = "123456";
    $fid = $_GET['fid'];
    try{
    $obj = new PDO($dsn,$name,$pwd);
    }catch(PDOexception $e){
        echo $e->getMessage();
    }
    $obj->query("SET NAMES utf8");
    $sql = 'select * from area where fid='.$fid;
    $list=$obj->query($sql)->FetchAll(2);
    $list=json_encode($list);
    echo ($list);
?>

现在要通过第一个级的option中的value值 来取得第二级的数据。现在无法获取第一级的value值,option为零!我的想法是因为alert()先执行不等ajax返回 追加。故没有option ajax同步异步都不行!大佬看看想想办法!不用jquery!!

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2310/viewspace-3154986/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-08-06

  • 博文量
    200
  • 访问量
    14417