• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ajax实现三级联动的基本方法

    本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下

    1.首先在一个页面上布置一个div 方便日后引用方法

    body>
    div id="sanji">//div的id为“sanji”
    /div>

    2.sanji js处理页面

    $(document).ready(function(){
        
       //向div里面放三个下拉菜单
      var str = "select id='sheng'>/select>
        select id='shi'>/select>
        select id='qu'>/select>";
      //给三个下拉列表定义 str 变量
      
      $("#sanji").html(str);
    
    
      FillSheng();
      FillShi();
      FillQu();//Sheng Shi Qu的逻辑顺序 
    
      
       $("#sheng").change(function(){
    
         FillShi();
         FillQu();
       })//给sheng菜单添加点击事件
    
       $("#shi").change(function(){
       FillQu();
      })//给shi菜单添加点击事件
    
    
    });//页面加载完成之后过来执行某些代码   
    
    

    3.填充sheng方法

    function FillSheng()
    {
     
      var pcode = "";//定义一个变量
      $.ajax({
         
         url:"chuli.php",
         data:{pcode:pcode},
         type:"POST",
         dataType:"TEXT",
         success:function(data){
                  var hang = data.split("^");
                  str +="option value='"+lie[0]+"'>"+lie[1]+"/option>";
    
          }
         $("#sheng").html(str);
    
         });
    
    }
    
    

    2.填充shi方法

    function FillShi()
    {
     var pcode = $("#sheng").val();
     $.ajax({
       async:false,
       url:"chuli.php",
       data:{pcode:pcode},
       type:"POST",
       dataType:"TEXT",
       success: function(data){
         var hang = data.split("|");
         var str = "";
         for(var i=0;ihang.length;i++)
         {
          var lie = hang[i].split("^");
          str += "option value='"+lie[0]+"'>"+lie[1]+"/option>";
         }
         $("#shi").html(str);
        }
      });
    }
    

    3.填充qu方法

    function FillQu()
    {
     var pcode = $("#shi").val();
     $.ajax({
       url:"chuli.php",
       data:{pcode:pcode},
       type:"POST",
       dataType:"TEXT",
       success: function(data){
         var hang = data.split("|");
         var str = "";
         for(var i=0;ihang.length;i++)
         {
          var lie = hang[i].split("^");
          str += "option value='"+lie[0]+"'>"+lie[1]+"/option>";
         }
         $("#qu").html(str);
        }
      });
    }
    

    4.chuli页面

    ?php
    include("DBDA.class.php");
    $db = new DBDA();
    $pcode = $_POST["pcode"];
    $sql = "select * from chinastates where parentareacode='{$pcode}'";
    echo $db->StrQuery($sql);
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • PHP+Mysql+Ajax+JS实现省市区三级联动
    • AJAX省市区三级联动下拉菜单(java版)
    • ajax三级联动下拉菜单效果
    • ajax三级联动的实现方法
    • ajax实现无刷新省市县三级联动
    • Ajax商品分类三级联动的简单实现(案例)
    • Ajax+php实现商品分类三级联动
    • ajax实现省市三级联动效果
    • 简单实现ajax三级联动效果
    • AJAX实现省市县三级联动效果
    上一篇:ajax实现数据分页查询
    下一篇:Ajax 入门之 GET 与 POST 的不同处详解
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    ajax实现三级联动的基本方法 ajax,实现,三级,联动,的,