ajax实现省、市、区、三级联动（例题）

时间：2017-03-20 22:23:03 阅读：256 评论：0 收藏：0 [点我收藏+]

标签：set doctype meta function and sheng min select where

题目要求：

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

技术分享

主界面

<!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="jquery-1.11.2.min.js"></script>
 
</head>
<body>
<h1>三级联动</h1>
<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>
 
</body>
<script type="text/javascript">
    $(document).ready(function(e) {
        sheng();
        shi();
        qu();
        $("#sheng").change(function(){
            shi();
            qu();
        });
        $("#shi").change(function(){
            qu();
        });
    });
 
        function sheng() {
            var areacode = "0001";
            $.ajax({
                async:false,
                url: "liandongjiazai.php",
                data: {areacode: areacode},
                type: "POST",
                dataType: "TEXT",
                success: function (data) {
                    var str = "";
                    var hang = data.split("|");
                    for (var i = 0; i < hang.length; i++) {
                        var lie = hang[i].split("^");
                        str = str + "<option value=‘"+lie[0]+"‘>" + lie[1] + "</option>";
                    }
                    $("#sheng").html(str);
                }
            });
        }
        function shi() {
            var areacode = $("#sheng").val();
            $.ajax({
                async:false,
                url:"liandongjiazai.php",
                data:{areacode:areacode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    var str = "";
 
                    var hang = data.split("|");
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    $("#shi").html(str);
 
                }
            });
        }
        function qu() {
            var areacode = $("#shi").val();
            $.ajax({
                url:"liandongjiazai.php",
                data:{areacode:areacode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    var str = "";
 
                    var hang = data.split("|");
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
                    }
                    $("#qu").html(str);
 
                }
            });
        }
 
 
</script>
</html>

处理

<?php
 
$areacode = $_POST["areacode"];
include("LZY.class.php");
$db= new LZY();
 
$sql = "select * from chinastates WHERE parentareacode=‘{$areacode}‘ ";
$arr = $db->Query($sql);
$str = "";
foreach($arr as $v)
{
    $str = $str.implode("^",$v)."|";
 
}
$str = substr($str,0,strlen($str)-1);
echo $str;

ajax实现省、市、区、三级联动（例题）

标签：set doctype meta function and sheng min select where

原文地址：http://www.cnblogs.com/yyy251/p/6591822.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行