三级联动(ajax同步)
发布时间:2020-12-16 03:04:03 所属栏目:百科 来源:网络整理
导读: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()
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",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",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值。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |