省市区三级联动

在日常的上网中,我们经常遇到省市区的选择,在这里我们讲解一下“省市区的三级联动”

第一:在html页面中写入div标签

<title>三级联动</title>
<script src="jquery-2.0.0.min.js"></script>
<script src="sanji.js"></script>
</head>

<body>
<h1>省市区选择</h1>
<div id="sanji"></div>

  

第二:在JScript中运行的代码

1.首先是下拉列表填充事件

$(document).ready(function(e) {

	$("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");

	//填充内容
	//1.填充省
	FillSheng();
	//2.填充市
	FillShi();
	//3.填充区
	FillQu();

  

2.如果第一级的省选择发生变化,第二级和第三级也会发生变化

//如果省选中变化了,去填充市和区
	$("#sheng").change(function(){

		//改变市
		FillShi();
		//改变区
		FillQu();

		})

  

3.如果第二级的市选择发生变化,第三级就会发生变化

//如果市选择变化了,去填充区
	$("#shi").change(function(){
		//改变区
		FillQu();

		})

  

4.上面引用的省填充fillsheng()函数

//填充省的方法
	function FillSheng()
	{
		//找到父级代号
		var pcode="0001";
		//调用ajax
		$.ajax({

			async:false,
			url:"chuli.php",
			data:{pcode:pcode},
			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+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";

				}

				$("#sheng").html(str);

				}

			});
	}

  

5.上面引用的市填充fillshi()函数

//填充市的方法
	function FillShi()
	{
		//找到父级代号
		var pcode=$("#sheng").val();
		//调用ajax
		$.ajax({

			async:false,
			url:"chuli.php",
			data:{pcode:pcode},
			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+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";

				}

				$("#shi").html(str);

				}

			});
	}

  

6.上面引用的区填充fillqu()函数

//填充区的方法
	function FillQu()
	{
		//找到父级代号
		var pcode=$("#shi").val();
		//调用ajax
		$.ajax({

			async:false,
			url:"chuli.php",
			data:{pcode:pcode},
			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+="<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";

				}

				$("#qu").html(str);

				}

			});
	}

  

第三:在JScript中的ajax运行的chuli.php代码

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

include("DBDA.class.php");
$db=new DBDA();

$sql = "select AreaCode,AreaName,ParentAreaCode from Chinastates where ParentAreaCode=‘{$pcode}‘";

echo $db->StrQuery($sql);

  

时间: 05-19

省市区三级联动的相关文章

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

省市区三级联动(二)JS部分简单版

通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的函数 $("#sjld").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"

QQ JS省市区三级联动

如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script> --> <

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

【修改】纯JS省市区三级联动 支持js默认省市区

---恢复内容开始--- <!DOCTYPE html><html><head><title>修改,QQ JS省市区三级联动 -支持默认省市区</title><!-- 使用QQ的省市区数据 --><!--<script type="text/javascript" src="http://ip.qq.com/js/geo.js"></script>--><

WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)

近期在实现收货地址功能,用到了省市区三级联动效果,网上找到一般都是xml或json.数据源陈旧改动麻烦.改动了一下使用数据库方式实现了一下 数据源解决.因为数据量比較大通过初始化批量运行SQL的方式不合适,费时不说还easy出错,我採用的是在电脑上创建好数据库然后把数据库文件放到程序里边,通过以下这种方法能够把db文件复制到随意文件夹下.demo中我把文件放在了raw文件夹下 /** * * @param inStream * @param fileNme 文件名称 * @param newPa

Ajax来实现下拉框省市区三级联动效果(服务端基于express)

//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = express(); //载入选择城市的页面 app.get('/',function(req,res){ res.sendFile( __dirname + "/7.city.html" ); }); //获取所有的省份 app.get('/province',function(req,res)

基于thinkphp和ajax的省市区三级联动

练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2,建一个index.html <div> <label>所在地点</label> <select name="province_id" id="province_id" style="width:150px;"