首页 > 代码库 > ajax实现三级联动下拉菜单

ajax实现三级联动下拉菜单

先不要着急去实现功能,我们第一步首先要理清思路,想要实现三级联动,首先要有三个下拉框,然后点击第一个下拉菜单,可以联动到第二个,点击第二个联动到第三个,实现省市区的三级联动,用到的数据表如下:

技术分享

为了以后可以随时拿出来用,我们先在主页面建立一个div叫sanji,然后用一个js页面来引用:

主页面引入Jquery和js:

<title>无标题文档</title>
<script src="jquery-3.2.0.min.js"></script>
<script src="sanji.js"></script>
</head>
<body>
<h1>区域查询</h1>
<div id="sanji"></div>
</body>
</html>

js页面才是重点,这个页面纯用js(jquery)代码来写,逻辑就是写三个方法,让省找到市,市找到区:

$(document).ready(function(e) {
    var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>";//三个下拉交给一个字符串
    $("#sanji").html(str);//将三个下拉的字符串交给前边的div
    tiansheng();//加载省的数据
    tianshi();//加载市的数据
    tianqu();//加载区 的数据
    
     $("#sheng").change(function(){                
            tianshi();//重新加载市
            tianqu();//重新加载区
        })
    $("#shi").change(function(){
            tianqu();//加载区的数据
        })
});

function tiansheng()
{
     var pcode = "0001"; //找出省的父级代号
      $.ajax({
            async:false,//同步
            url:"sanchuli.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=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";    
                    }
                    $("#sheng").html(str); 
                }
        });
}

function tianshi()
{
    var pcode = $("#sheng").val();//找市的父级代号,省选中项的值
    $.ajax({
            async:false,
            url:"sanchuli.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=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    $("#shi").html(str);
                }
        });
}

function tianqu()
{
    var pcode = $("#shi").val();//找区的父级代号,市选中项的值
    $.ajax({
            url:"sanchuli.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=http://www.mamicode.com/‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
                }
        });
}

最后处理页面很简单,直接用一个页面就可以,因为要实现的功能都是一样的:

<?php
$pcode = $_POST["pcode"];

require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from chinastates where parentareacode=‘{$pcode}‘";
echo $db->strquery($sql);

 最终效果图:

技术分享

技术分享

 

ajax实现三级联动下拉菜单