三级联动

三级联动效果实现；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script type="text/javascript" src="../111111/public/jquery-3.2.1.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="sj">
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){                        入口函数
    var str ="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"             
    $("#sj").html(str);
    sheng();
    shi();
    qu();
    $("#sheng").change(function(){
        shi();
        qu();
    })
    $("#shi").change(function(){
        qu();
    })
    })
    function sheng(){                                                省份
        var found = 0;                              利用  “0”   查找 相关城市，
        var fsheng = "";
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:false,
            data:{
            found:found
            },
            dataType:"json",
            success:function(data){
             for(var i =0;i<data.length;i++){
                 fsheng +="<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
              }
              $("#sheng").html(fsheng);    
            }
        });
    }
    function shi(){                                                          城市
        var found = $("#sheng").val();
        var fshi = "";
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:false,
            data:{
            found:found
            },
            dataType:"json",
            success:function(data){
             for(var i =0;i<data.length;i++){
                 fshi +="<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
              }
              $("#shi").html(fshi);    
            }
        });
    }
    function qu(){
        var found =$("#shi").val();                                     区
        var fqu = "";
        $.ajax({
            type:"post",
            url:"chuli.php",
            async:false,
            data:{
            found:found
            },
            dataType:"json",
            success:function(data){
             for(var i =0;i<data.length;i++){
                 fqu +="<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
              }
              $("#qu").html(fqu);    
            }
        });
    }
</script>

三级处理   拼接实现下拉选项

<?php
    $conn =new mysqli("localhost","root","","ceshi3");
    $conn->connect_error?die("链接失败"):"";
    $found =$_POST['found'];
    $sql = "select * from dt_area where area_parent_id = '$found'";     查找
    $result = $conn->query($sql);
    $attr = $result->fetch_all();
    echo json_encode($attr);
?>

PHP处理页面  利用 字段名 进行区分

改变第一个省份   市区联动。

重点    ：

$(document).ready(function(){
    var str ="<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"             
    $("#sj").html(str);
    sheng();
    shi();
    qu();
    $("#sheng").change(function(){
        shi();
        qu();
    })
    $("#shi").change(function(){
        qu();
    })
    })
    function sheng(){
        var found = 0;
        var fsheng = "";

posted @ 2018-06-21 16:25  所爱隔山隔海  阅读(99)  评论(0)    收藏  举报