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！！
最佳答案
0
是这样吗？
收获园豆：100
对的！我的少一级
@码农永不为奴: 你这么写肯定是先弹窗啊，思路对吗？我给你解决问题还是整体思路？
@铁柱成针:
整体思路是有的，就是要取得第一级的value值也就是第一级的id同value与第二级的fid进行对比选择
利用change事件。
解决问题吧！谢谢！
@码农永不为奴: 我可不可以这么理解，你的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。
@铁柱成针:
你的代码能分享给我吗？解决了一个问题有出现了另一个问题！
@码农永不为奴: 给分，说你qq
其他回答(1)
0
想写啥有的没.你第一级当然要先展示出来.不然怎么开始
我第一级已经用appendChild 追加进去了。
@码农永不为奴: 那你的问题是什么?
既然已经有了为什么会 现在无法获取第一级的value值，option为零
@吴瑞祥:
现在取不到第一级的值，我也很无奈呀！每次运行代码总是弹窗先出来再加载ajax追加子节点。
@码农永不为奴: 为什么取不到?你不是说
我第一级已经用appendChild 追加进去了。