ajax实现三级联动

Posted on 2017-02-13 15:10  王小明爱红领巾  阅读(800)  评论(0)  编辑  收藏  举报

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;i<hang.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;i<hang.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);

基本实现三级联动