ajax实现省、市、区、三级联动(例题)

题目要求:

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择。

实现技术: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;
时间: 2024-10-11 01:21:36

ajax实现省、市、区、三级联动(例题)的相关文章

html实现 省——市——区三级联动

html实现  省--市--区三级联动 html中实现三级联动是一个不错的demo,博主在这里跟大家分享一下实现的过程,以及自己在过程中出现的一些问题,仅供参考. 首先我们将全国的省市区数据导入进来,这里已经直接整理搜集好了.如下: var provinceList = [ {name:'北京', cityList:[ {name:'市辖区', areaList:['东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区

UIPickerView实现省 市 区三级联动

前几天用UIPickerView实现了一下三级联动具体的如下图 下面是实现方式 #import "ViewController.h" #define FirstComponent 0 #define SubComponent 1 #define ThirdComponent 2 @interface ViewController () @property(nonatomic,retain)NSDictionary* dict; @property(nonatomic,retain)NS

AJAX 三级联动例题

用ajax三级联动写一个关于省市区下拉列表的联动 数据库中的表: id是这条数据的主键,dname是地区名称,parentid是父级id 页面效果: 先实例化一个district类 package com.hanqi.model; public class District { private String id; private String dname; private String parentid; public District(String id, String dname, Str

使用php ajax实现一个省市区的三级联动

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 完成效果如下: 实现三级联动  以后可能 还会用到 所以 可以将其封装为一个方法 新建一个JS页面 代码如下: // JavaScript Document $(document).ready(function(e) { //向DIV里面扔三个下拉 var str = "&

2017-6-6 Ajax版页面无刷新三级联动

实现效果: 页面代码: <div> <select id="sel1" style="width:100px;"> </select> <select id="sel2" style="width:100px;"> </select> <select id="sel3" style="width:100px;"> &

省、市、区 三级联动,Vue+SpringDataJpa实现

1.使用elementui中的下拉框 注意:这里都是使用前后端分离的模式来写的,所以需要安装好node.js和vue的环境 1.数据库文件,完整文件:https://files.cnblogs.com/files/autonomy/%E7%9C%81%E5%B8%82%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8.rar a>省份 1 DROP TABLE IF EXISTS `t_address_province`; 2 CREATE TABLE `t_address

Android开发之解析XML并实现三级联动效果

请尊重他人的劳动成果,转载请注明出处:Android开发之解析XML并实现三级联动效果 本实例主要应用XmlPullParser解析XML文档中的省市区,然后将数据绑定到Spinner上实现三级联动的效果.关于XmlPullParser的详解大家可以参考<Android开发之使用PULL解析和生成XML>一文. 运行效果图: 程序代码: 核心代码: <pre name="code" class="java">package com.jph.s

AJAX+PHP实现三级联动

利用ajax实现页面地区选择三级联动 效果图如下 当选择相应省份时,对应显示出所有相关城市和地区的下拉选择 来看下如何实现的 html页面部分 <!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.

AJAX实现三级联动

省市区三级联动插件: 主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

封装标签省,市,县。三级联动

package com.jy.modules.tld; import com.jy.platform.api.sysarea.SysAreaAPI; import java.io.IOException; import java.util.List; import java.util.Map; import javax.servlet.ServletContext; import javax.servlet.jsp.JspException; import javax.servlet.jsp.J