zoukankan      html  css  js  c++  java
  • example_Jquery Ajax + php 三级联动

    sanji.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../jquery-2.2.2.min.js"></script>
    <script src="sanji.js"></script>
    <title>无标题文档</title>
    </head>
    
    <body>
    
    <h1>三级联动</h1>
    
    <div id="sj"></div>
    </body>
    </html>
    View Code

    sanji.js

    // JavaScript Document
    $(document).ready(function(e) {
        
        //在DIV里造下拉菜单
        $("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
        
        //填充数据
        FillSheng();  //填充省的数据
        FillShi();      //填充市的数据
        FillQu();        //填充区的数据
            
                //填充省的方法
                    function FillSheng()
        {
            var code = "0001";  //省的父级代号
            
            $.ajax({
                
                url:"chuli.php",
                data:{code:code},
                type:"POST",
                dataType:"TEXT",
                async:false,
                success: function(data){
                    
                        var hang = data.split("|");
                        
                        var str = "";
                        
                            for(var i=0;i<hang.length;i++)
                        {
                            var lie = hang[i].split("^");
                            
                            str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                        }
                        
                        //把所有<option>放到省的下拉列表里
                        $("#sheng").html(str);
                    
                                        }
                
                    })
            
        }
        
                //填充市的方法
                function FillShi()
        {
            var code = $("#sheng").val();  //市的父级代号
            
            $.ajax({
                
                url:"chuli.php",
                data:{code:code},
                type:"POST",
                dataType:"TEXT",
                async:false,
                success: function(data){
                    
                        var hang = data.split("|");
                        
                        var str = "";
                        
                            for(var i=0;i<hang.length;i++)
                        {
                            var lie = hang[i].split("^");
                            
                            str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                        }
                        
                        //把所有<option>放到市的下拉列表里
                        $("#shi").html(str);
                    
                                        }
                    })
            
        }
        
                //填充区的方法        
                function FillQu()
        {
            var code = $("#shi").val();  //区的父级代号
            
            $.ajax({
                
                url:"chuli.php",
                data:{code:code},
                type:"POST",
                dataType:"TEXT",
                async:false,
                success: function(data){
                    
                        var hang = data.split("|");
                        
                        var str = "";
                        
                            for(var i=0;i<hang.length;i++)
                        {
                            var lie = hang[i].split("^");
                            
                            str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                        }
                        
                        //把所有<option>放到区的下拉列表里
                        $("#qu").html(str);
                    
                                        }
                    })
            
        }
        
        //当省发生改变的时候,市和区一起变
        $("#sheng").change(function() {
            
            FillShi();
            FillQu();        
        });
        
        //当市发生改变的时候,区一起变
        $("#shi").change(function() {
            
            FillQu();
            
        });
        
    
    });
    View Code

    chuli.php

    <?php
    
    include("../DBDA.php");
    
    $con = new DBDA();
    
    $pcode = $_POST["code"];
    
    $sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = '{$pcode}'";
    
    echo $con->Query_string($sql);
    
    
    ?>
    View Code
  • 相关阅读:
    Pikachu漏洞练习平台实验——SQL注入(四)
    ELMO,BERT和GPT简介
    Self-Attention 和 Transformer
    Seq2Seq和Attention机制入门介绍
    循环神经网络(RNN)入门介绍
    XGBoost的推导和说明
    在Azure DevOps Server中运行基于Spring Boot和Consul的微服务项目单元测试
    Azure DevOps Server(TFS) 客户端分析
    传统码头建设企业:Azure DevOps Server 流水线技术沟通
    ItelliJ Idea 2019提交TFVC变更,系统提示Validation must be performed before checking in
  • 原文地址:https://www.cnblogs.com/sihuiming/p/5365650.html
Copyright © 2011-2022 走看看