zoukankan      html  css  js  c++  java
  • 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" />
    <title>无标题文档</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="sanji.js"></script>
    </head>

    <body>
    <div id="sanji"></div>
    </body>
    </html>

    // JavaScript Document
    $(document).ready(function(e) {

    //将DIV里面写入三个下拉列表
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

    //填充内容
    //1.填充省
    FillSheng();
    //2.填充市
    FillShi();
    //3.填充区
    FillQu();

    //如果省选中变化的时候,去填充市和区
    $("#sheng").change(function(){

    //改变市
    FillShi();
    //改变区
    FillQu();

    })
    //如果市选中变化的时候,去填充区
    $("#shi").change(function(){

    //改变区
    FillQu();

    })

    //填充省的方法
    function FillSheng()
    {
    //找到父级代号
    var pcode = "0001";
    //调用Ajax
    $.ajax({

    async:false,
    url:"chuli.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"TEXT",
    success: function(data){

    var str = "";
    var hang = data.split("|");

    for(var i=0; i<hang.length;i++)
    {
    var lie = hang[i].split("^");
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    }

    $("#sheng").html(str);

    }
    });
    }
    //填充市的方法
    function FillShi()
    {
    //找到父级代号
    var pcode = $("#sheng").val();
    //调用Ajax
    $.ajax({
    async:false,
    url:"chuli.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"TEXT",
    success: function(data){
    var str = "";
    var hang = data.split("|");

    for(var i=0; i<hang.length;i++)
    {
    var lie = hang[i].split("^");
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    }

    $("#shi").html(str);
    }
    });
    }

    //填充区的方法
    function FillQu()
    {
    //找到父级代号
    var pcode = $("#shi").val();
    //调用Ajax
    $.ajax({
    async:false,
    url:"chuli.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"TEXT",
    success: function(data){
    var str = "";
    var hang = data.split("|");

    for(var i=0; i<hang.length;i++)
    {
    var lie = hang[i].split("^");
    str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    }

    $("#qu").html(str);
    }
    });
    }


    });

    <?php
    //取到传过来的父级代号
    $pcode = $_POST["pcode"];
    //引入数据操作类
    include("DBDA.php");
    $db = new DBDA();

    //写SQL语句
    $sql = "select AreaCode,AreaName,ParentAreaCode from ChinaStates where ParentAreaCode='{$pcode}'";
    //执行
    echo $db->StrQuery($sql);

  • 相关阅读:
    电子招投标应用系统连载(一)-开标系统
    js实现一个简单钟表动画(javascript+html5 canvas)
    ,net core mvc 文件上传
    echarts显示X轴最后一个lable
    C# 解压gzip文件(.tgz)
    【转】C#计算两坐标点距离
    用file标签实现多图文件上传预览
    c#数据批量插入
    Asp.net 中ViewState,cookie,session,application,cache的比较
    ASP.NET MVC从请求到响应发生了什么
  • 原文地址:https://www.cnblogs.com/xiongxiaobai/p/5527167.html
Copyright © 2011-2022 走看看