省级三级联动

<!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>
<script src="sanjiliandong.js"></script>
</head>

<body>

<div id="sanji"></div>

</body>
</html>
$(document).ready(function(e) {
    //往id=sanji的div里面扔三个下拉
	var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>";

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

	FillSheng();
	FillShi();
	FillQu();

	$("#sheng").change(function(){
			FillShi();
			FillQu();
		})
	$("#shi").change(function(){
			FillQu();
		})

});

//填充省的方法
function FillSheng()
{
	var pcode = "0001";

	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#sheng").html(str);
			}

		});
}

//填充市的方法
function FillShi()
{
	var pcode = $("#sheng").val();

	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#shi").html(str);
			}

		});
}

//填充区的方法
function FillQu()
{
	var pcode = $("#shi").val();

	$.ajax({
		async:false,
		url:"sanjichuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.split("|");
				var str ="";
				for(var i=0;i<hang.length;i++)
				{
					lie = hang[i].split("^");
					str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
				}
				$("#qu").html(str);
			}

		});
}

  sanjichuli.php 页面

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

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

$sql = "select * from chinastates where parentareacode=‘{$pcode}‘";

echo $db->StrQuery($sql);

  实现的效果图:

时间: 2024-10-06 10:48:46

省级三级联动的相关文章

ajax简介以及用ajax做的三级联动小练习

ajax基本结构: 1 var name = $("#text_1").val(); 2 $.ajax({ 3 url: "Ashxs/Handler.ashx",//一般处理程序路径 4 data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接 5 type: "post",//传输方式 6 dataType: "json",//

使用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

省市三级联动

mumuy-widget-91839b8 http://jquerywidget.com/ /** * jquery.citys.js 1.0 * http://jquerywidget.com */ ;(function (factory) { if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) { // AMD或CMD define([ "jq

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

题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 主界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

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

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

完整的Ajax及三级联动小练习

Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理程序路径 data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接 type: "post",//传输方式 dataType: "json",//返回数据类型 success

ajax地址三级联动下拉表

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

用php+mysql+ajax+jquery做省市区三级联动

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单html:ssq.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x