html
<div id="frame"></div>
js
$(function(){ //拼接省市区下拉框 var str = `<select id='sheng'></select> <select id='shi'></select> <select id='qu'></select>`; $('#frame').html(str); //页面加载完成后执行省市区显示函数。 sheng(); shi(); qu(); //省市添加改变函数,当这一项改变时下面的项跟着改变 $('#sheng').change(function(){ shi(); qu(); }) $('#shi').change(function(){ qu(); }) }) //省显示函数 function sheng(){ //设置pid为0 var pcode = '0'; var str = ''; //异步进行,pid传入后台,返回的json第0项为id 第1项为地区名 //循环拼接option,放入html $.ajax({ type:"post", url:"sjll.php", async:false, data:{ pcode:pcode }, dataType:'json', success:function(data){ for(var i = 0; i < data.length; i++){ str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>"; } $('#sheng').html(str); } }); } function shi(){ //获取省的id值为市的pid var pcode = $('#sheng').val(); var str = ''; //异步进行,pid传入后台,返回的json第0项为id 第1项为地区名 //循环拼接option,放入html $.ajax({ type:"post", url:"sjll.php", async:false, data:{ pcode:pcode }, dataType:'json', success:function(data){ for(var i = 0; i < data.length; i++){ str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>"; } $('#shi').html(str); } }); } function qu(){ //获取市的id值为区的pid var pcode = $('#shi').val(); var str = ''; //异步进行,pid传入后台,返回的json第0项为id 第1项为地区名 //循环拼接option,放入html $.ajax({ type:"post", url:"sjll.php", async:false, data:{ pcode:pcode }, dataType:'json', success:function(data){ for(var i = 0; i < data.length; i++){ str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>"; } $('#qu').html(str); } }); }
php
<?php $db = new MySQLi('localhost','root','1','test'); !mysqli_connect_error() or die ('连接错误'); $db->query('set names utf8'); //获取传值pid $pcode = $_POST['pcode']; //查找当前pid下的所有内容 $sql = "select * from dt_area where pid = $pcode"; $res = $db->query($sql); $attr = $res->fetch_all(); //返回json格式 echo json_encode($attr); ?>
注意:
这里的ajax使用同步传输方式,因为当省执行完市才能拿到省的id值。