加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

三级联动(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值。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读