利用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實現省市區三級聯動