省、市、区(县)三级联动

用纯js写,这种方法的优点是可以随时引用该js文件,只需要引入该js文件即可。

1.写一个显示页面

sanji.php

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery文件-->
 6 <script src="sanjiliandong.js"></script><!--引入三级联动的js文件-->
 7 <title>无标题文档</title>
 8 </head>
 9 <body>
10 <div id="sanji"></div>
11 </body>
12 </html>

2.纯js页面

sanjiliandong.js

// JavaScript Document
$(document).ready(function(e) {
    //往id=sanji的div里面扔三个下拉
    var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>";//做option选项
    $("#sanji").html(str);//往sanji.php文件里添加
    FillSheng();//填充省
    FillShi();//填充市
    FillQu();//填充区
    $("#sheng").change(function(){//省变化调用FillShi()和FillQu()
            FillShi();
            FillQu();
        })
    $("#shi").change(function(){//市变化调用FillQu()
            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);
            }

        });
}

3.php处理页面

sanjichuli.php

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

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

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

echo $db->StrQuery($sql);
?>
时间: 06-17

省、市、区(县)三级联动的相关文章

ajax(省,市,县)三级联动

下面我们用Jquery,ajax,做一个省,市,县的三级联动: 下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquery-1.11.2.min.js和自己封装的三联动省市区的方法 第三步:写封装方法用JS 第四步:做个纯php处理页面,这个页面处理传过来的任何代号 首先我们要建立数据库: 这就是包含省,市,县的数据库, 下面我们就写主页面:sanji.php:

显示省、市、县三级联动的选择

本文主要是实现:用户交互,显示省市县三级联动的选择 代码: #!/usr/bin/env python# -*- coding:utf-8 -*-# author by lh dic = { '河北': { '石家庄': ['鹿泉', '藁城', '元氏'], '邯郸': ['永年', '涉县', '磁县'], }, '河南': { '郑州':['中原区','二七区','金水区'], '开封':['龙亭区','鼓楼区','禹王台区'] }, '山西': { '太原':['迎泽区','杏花岭区',

(我国的省—市—区)三级联动数据库.sql

# MySQL-Front 5.1  (Build 2.7) /*!40101 SET @[email protected]@SQL_MODE */; /*!40101 SET SQL_MODE='' */; /*!40111 SET @[email protected]@SQL_NOTES */; /*!40103 SET SQL_NOTES='ON' */; # Host: localhost    Database: iptohat_area # ---------------------

JQUERY省、市、县城市联动选择

JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了...此处省去N个字).然后最近“瘾”又犯了,呵呵,随手就拿这个“欠”了很久的插件开刀了.大家都应该知道“某宝”的这个插件写的还是很强大的,支持到街道(镇)级别...可见他们维护的前端数据有多大...不过呢,临渊羡鱼,不如退

Jquery 插件开发——citylinkage(省、市、县城市联动选择)

第一部分:摘要 说实话,有时候真想抽点时间写写博客.记录是一种习惯, 第二部分:插件思想 第三部分:开发过程 第四部分:详细代码实现 第五部分:效果图 第六部分:总结 Jquery 插件开发--citylinkage(省.市.县城市联动选择)

省,市,区/县三级联查

一,数据库建表,省,市,区/县等级由高到低,定义按个百位十位数字设定. 二,设置最高等级"省"的编号为主键,这里使用ID,不同的省只有一个所以设为主键不会冲突,再设置一个管理下一个层级的PARENTID开头使用0来设置,例如北京的ID设为1,PARENTID为0,山东的ID设为2PARENTID为0. 三,设置市为第二层级关系,因为主键无法重复,上面定义了表示第二层级的PARENTID为0,例属于北京的海淀区ID为101,PARENTID为1     朝阳区的ID为102,PARENT

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

js实现省、市、区的三级联动

如何实现省市区的三级联动呢? 这里,我是将省市区的相关信息都是以json 格式保存的,用的时候一定要搞清楚数组和对象的相关处理. 先来看看json格式存储的信息,这里提供下省市区的信息截图,内容太多,不好上传:.js文件(area-json.js) 首先先创建是三个空的select标签,给它们分别定义一个id名 ,并通过id获取到 <select id="province"></select> <select id="shi">&

省市县(区)三级联动

1:首先是JS文件:area.ui.js (function($){     function Dsy(){         this.Items = {};     }     Dsy.prototype.add = function(id,iArray){         this.Items[id] = iArray;     }     Dsy.prototype.Exists = function(id){         if(typeof(this.Items[id]) == "u

JS设计省、市、县的联动

最近用js写了一段省市县的联动设置,先传上来,后期会不断优化 效果图如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <