Ajax结合php实现二级联动
本文实例为大家分享了Ajax结合php实现二级联动的具体代码,使用ajax,从php中获取数据,具体内容如下
使用ajax,从php中获取数据
<!DOCTYPEhtml> <html> <head> <title>Ajax案例一</title> <metacharset="utf-8"/> </head> <body> <!--二级联动--> <selectid="province"> <option>请选择</option> <option>山东省</option> <option>辽宁省</option> <option>吉林省</option> </select> <selectid="city"> <option>请选择</option> </select> <script> //1.为<select>元素绑定onchange事件 varprovinceEle=document.getElementById("province"); provinceEle.onchange=function(){ //将id为city的元素内容清空 varcity=document.getElementById("city"); varopts=city.getElementsByTagName("option"); for(varz=opts.length-1;z>0;z--){ city.removeChild(opts[z]); } //2.获取用户当前选择的省份名称 varprovince=provinceEle.value; //3.创建对应的城市列表-数组 varcities=[]; switch(province){ case"山东省": cities=["青岛市","济南市","威海市","日照市","德州市"]; break; case"吉林省": cities=["长春市","松原市","吉林市","通化市","四平市"]; break; case"辽宁省": cities=["沈阳市","大连市","铁岭市","丹东市","锦州市"]; break; } //遍历城市列表 for(vari=0;i<cities.length;i++){ //4.创建<option>元素 varoption=document.createElement("option"); //5.将城市的信息添加到<option>元素上 vartextNode=document.createTextNode(cities[i]); option.appendChild(textNode); //6.将创建的所有<option>元素添加到id为city元素上 city.appendChild(option); } } </script> </body> </html>
php:
<?php //用于处理客户端请求二级联动的数据 //1.接收客户端发送的省份信息 $province=$_POST['provcince']; //2.判断当前的省份信息,提供不同的城市信息 switch($province){ case'山东省': echo'青岛市,济南市,威海市,日照市,德州市'; break; case'辽宁省': echo'沈阳市,大连市,铁岭市,丹东市,锦州市'; break; case'吉林省': echo'长春市,松原市,吉林市,通化市,四平市'; break; } //服务器端响应的是字符串 ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。