首页 > > > javascript用ajax实现省市区的三级联动
<!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/ ,如需转载,请注明出处,否则将追究法律责任。