首页新闻找找看学习计划

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

0
悬赏园豆:100 [已解决问题] 解决于 2017-08-10 14:39
<!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!!

码农永不为奴的主页 码农永不为奴 | 初学一级 | 园豆:112
提问于:2017-08-09 20:11
< >
分享
最佳答案
0

是这样吗?

收获园豆:100
铁柱成针 | 小虾三级 |园豆:614 | 2017-08-10 09:11

对的!我的少一级

码农永不为奴 | 园豆:112 (初学一级) | 2017-08-10 09:29

@码农永不为奴: 你这么写肯定是先弹窗啊,思路对吗?我给你解决问题还是整体思路?

铁柱成针 | 园豆:614 (小虾三级) | 2017-08-10 09:32

@铁柱成针:
整体思路是有的,就是要取得第一级的value值也就是第一级的id同value与第二级的fid进行对比选择
利用change事件。

解决问题吧!谢谢!

码农永不为奴 | 园豆:112 (初学一级) | 2017-08-10 09:37

@码农永不为奴: 我可不可以这么理解,你的select1中已经有了省列表,select2中已经有了市列表,select3中已经有了区列表,那么获取select1中的当前选择省的代码为,接着你这个写:

elc =document.getElementsByTagName('select');

elc_1 = elc[0];

var province = elc_1[elc_1.selectedIndex].text;

然后,使用select的change事件去监测省和市的变化,让后面的select内容随省市值变化,就可以了。

在第一次加载时,注意也需要判断上一级select的值,再去获取下一级select。

铁柱成针 | 园豆:614 (小虾三级) | 2017-08-10 09:47

@铁柱成针:
你的代码能分享给我吗?解决了一个问题有出现了另一个问题!

码农永不为奴 | 园豆:112 (初学一级) | 2017-08-10 13:11

@码农永不为奴: 给分,说你qq

铁柱成针 | 园豆:614 (小虾三级) | 2017-08-10 13:45
其他回答(1)
0

想写啥有的没.你第一级当然要先展示出来.不然怎么开始

吴瑞祥 | 园豆:28731 (高人七级) | 2017-08-09 22:38

我第一级已经用appendChild 追加进去了。

支持(0) 反对(0) 码农永不为奴 | 园豆:112 (初学一级) | 2017-08-10 08:37

@码农永不为奴: 那你的问题是什么?

既然已经有了为什么会  现在无法获取第一级的value值,option为零

支持(0) 反对(0) 吴瑞祥 | 园豆:28731 (高人七级) | 2017-08-10 08:39

@吴瑞祥:
现在取不到第一级的值,我也很无奈呀!每次运行代码总是弹窗先出来再加载ajax追加子节点。

支持(0) 反对(0) 码农永不为奴 | 园豆:112 (初学一级) | 2017-08-10 09:29

@码农永不为奴: 为什么取不到?你不是说

我第一级已经用appendChild 追加进去了。

支持(0) 反对(0) 吴瑞祥 | 园豆:28731 (高人七级) | 2017-08-10 09:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册