利用php实现三级联动

本文转载自查看原文 2018-01-20 10:19 1170

<!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="bootstrap/js/jquery-1.11.2.min.js"></script>
</head>

<body>
<div id="diqu">
<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>
</div>

</body>
<script type="text/javascript">
$(document).ready(function(e) {
    sheng();
    shi();
    qu();
    
    $("#sheng").change(function(){                
            shi();
            qu();
        })
    $("#shi").change(function(){
            qu();
        })
});


function sheng(){
    var dq = "0001";
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{dq:dq},
        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>";
                    }
                $("#sheng").html(str);
                }
        });
    }
            

function shi(){
    var dq = $("#sheng").val();
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{dq:dq},
        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);
                }
        });
}

function qu()
{
    var dq = $("#shi").val();
    $.ajax({
        async:false,
        url:"chuli.php",
        data:{dq:dq},
        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);
                }
        });
}

</script>
</html>

处理页面为：

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

这样就可以实现省市区的三级联动效果

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 使用JSon实现三级联动 jQuery实现三级联动 php三级联动（html，php两个页面）利用jquery和ajax实现省市区的三级联动利用select实现年月日三级联动的日期选择效果 jquery+php+mysql实现Ajax省市县三级联动 angularjs三级联动 vuejs 三级联动 webForm（三）——三级联动 UIPickerView实现省市区三级联动