zoukankan html css js c++ java

三级联动

三级联动效果实现；

<!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 = "";

查看全文

相关阅读:
人脸识别员工考勤系统
 栈和队列
 线性表
 C语言博客作业02--循环结构
 课程设计-个人博客
 C博客作业02--循环结构
 博客作业--函数
 c博客作业
 联系方式
 专业特长

原文地址：https://www.cnblogs.com/zhengleilei/p/9209681.html