jQuery ajax+PHP实现的级联下拉列表框功能示例


Posted in PHP onFebruary 12, 2019

本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考,具体如下:

一 代码

fun.js:

// JavaScript Document
$(document).ready(
 function(){
 $.get("returnpc.php?flag=p", null, function(data){ //向服务器发送GET请求,获取省份的值,并将结果追加到省份下拉列表中
   $("#p").append(data);
 });
 $("#c").css("display","none"); //初始状态使城市下拉列表不可见
 $("#p").change(function(){ //为省份下拉列表增加改变事件
   if($("#p").val()==""){ //在没选择省份的情况下,使城市下拉列表不可见
    $("#c").css("display","none");
  }else{
     $.get("returnpc.php?flag=c&p="+$("#p").val(), null, function(data){ //如果选择了某省份,则向服务器发送GET请求,使用回调函数为城市下拉列表赋值,并使城市下拉列表可见
      $("#c").css("display","");
   $("#c").empty();
      $("#c").append(data); //将数据追加到城市下拉列表
    });
    }
 });
  }
);

index.php:

<!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=gb2312" />
<title>使用jQuery制作级联下拉选择框选择地区</title>
</head>
<script language="javascript" src="js/jquery-1.3.2.js"></script>
<script language="javascript" src="js/fun.js"></script>
<body>
<select id="p" name="p" >
  <option value="">-请选择地区-</option>
</select>
<select id="c" name="c">
</select>
</body>
</html>

pc.php:

<?php
/* 说明: 全国(省,直辖市,自治区,特别行政区)数组*/
$p = array('北京','上海','天津','重庆','黑龙江','吉林','辽宁','内蒙古','河北','河南','山东','山西','江苏','安徽','陕西','宁夏','甘肃','青海','湖北','湖南','浙江','江西','福建','贵州','四川','广东','广西','云南','海南','新疆');
/* 说明: 省,市,直辖市,自治区所属的城市数组*/
$c = array();
$c[0] = array('北京');
$c[1] = array('上海');
$c[2] = array('天津');
$c[3] = array('重庆');
$c[4] = array('哈尔滨','齐齐哈尔','牡丹江','大庆','伊春','双鸭山','鹤岗','鸡西','佳木斯','七台河','黑河','绥化','大兴安岭');
$c[5] = array('长春','延边','吉林','白山','白城','四平','松原','辽源','大安','通化');
$c[6] = array('沈阳','大连','葫芦岛','旅顺','本溪','抚顺','铁岭','辽阳','营口','阜新','朝阳','锦州','丹东','鞍山');
$c[7] = array('呼和浩特','呼伦贝尔','锡林浩特','包头','赤峰','海拉尔','乌海','鄂尔多斯','通辽');
$c[8] = array('石家庄','唐山','张家口','廊坊','邢台','邯郸','沧州','衡水','承德','保定','秦皇岛');
$c[9] = array('郑州','开封','洛阳','平顶山','焦作','鹤壁','新乡','安阳','濮阳','许昌','漯河','三门峡','南阳','商丘','信阳','周口','驻马店');
$c[10] = array('济南','青岛','淄博','威海','曲阜','临沂','烟台','枣庄','聊城','济宁','菏泽','泰安','日照','东营','德州','滨州','莱芜','潍坊');
$c[11] = array('太原','阳泉','晋城','晋中','临汾','运城','长治','朔州','忻州','大同','吕梁');
$c[12] = array('南京','苏州','昆山','南通','太仓','吴县','徐州','宜兴','镇江','淮安','常熟','盐城','泰州','无锡','连云港','扬州','常州','宿迁');
$c[13] = array('合肥','巢湖','蚌埠','安庆','六安','滁州','马鞍山','阜阳','宣城','铜陵','淮北','芜湖','毫州','宿州','淮南','池州');
$c[14] = array('西安','韩城','安康','汉中','宝鸡','咸阳','榆林','渭南','商洛','铜川','延安');
$c[15] = array('银川','固原','中卫','石嘴山','吴忠');
$c[16] = array('兰州','白银','庆阳','酒泉','天水','武威','张掖','甘南','临夏','平凉','定西','金昌');
$c[17] = array('西宁','海北','海西','黄南','果洛','玉树','海东','海南');
$c[18] = array('武汉','宜昌','黄冈','恩施','荆州','神农架','十堰','咸宁','襄樊','孝感','随州','黄石','荆门','鄂州');
$c[19] = array('长沙','邵阳','常德','郴州','吉首','株洲','娄底','湘潭','益阳','永州','岳阳','衡阳','怀化','韶山','张家界');
$c[20] = array('杭州','湖州','金华','宁波','丽水','绍兴','雁荡山','衢州','嘉兴','台州','舟山','温州');
$c[21] = array('南昌','萍乡','九江','上饶','抚州','吉安','鹰潭','宜春','新余','景德镇','赣州');
$c[22] = array('福州','厦门','龙岩','南平','宁德','莆田','泉州','三明','漳州');
$c[23] = array('贵阳','安顺','赤水','遵义','铜仁','六盘水','毕节','凯里','都匀');
$c[24] = array('成都','泸州','内江','凉山','阿坝','巴中','广元','乐山','绵阳','德阳','攀枝花','雅安','宜宾','自贡','甘孜州','达州','资阳','广安','遂宁','眉山','南充');
$c[25] = array('广州','深圳','潮州','韶关','湛江','惠州','清远','东莞','江门','茂名','肇庆','汕尾','河源','揭阳','梅州','中山','德庆','阳江','云浮','珠海','汕头','佛山');
$c[26] = array('南宁','桂林','阳朔','柳州','梧州','玉林','桂平','贺州','钦州','贵港','防城港','百色','北海','河池','来宾','崇左');
$c[27] = array('昆明','保山','楚雄','德宏','红河','临沧','怒江','曲靖','思茅','文山','玉溪','昭通','丽江','大理');
$c[28] = array('海口','三亚','儋州','琼山','通什','文昌');
$c[29] = array('乌鲁木齐','阿勒泰','阿克苏','昌吉','哈密','和田','喀什','克拉玛依','石河子','塔城','库尔勒','吐鲁番','伊宁');
?>

returnpc.php:

<?php
require_once 'pc.php';  //包含省份数组和城市数组
$flag = $_GET['flag'];   //用于区分是返回省份信息还是返回城市信息
$str="";
if($flag == p){   //如果参数flag的值为p,则返回省份信息
  for($i=0; $i<count($p); $i++){   //通过循环整理所有要追加到省份下拉列表的内容
    $str.="<option value=\"".iconv('gbk','utf-8',$p[$i])."\">".iconv('gbk','utf-8',$p[$i])."</option>";
  }
  echo $str;   //输出要返回的参数
}else{
  $index = array_search($_GET['p'], $p);   //提取所选择省份的在省份数组中对应的键值
  for($j=0; $j<count($c[$index]); $j++){    //通过循环整理所有要追加到城市下拉列表的内容
    $str.= "<option value=\"".iconv('gbk','utf-8',$c[$index][$j])."\">".iconv('gbk','utf-8',$c[$index][$j])."</option>";
 }
 echo $str;    //输出要返回的参数
}
?>

二 运行结果

jQuery ajax+PHP实现的级联下拉列表框功能示例

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
PHP+DBM的同学录程序(2)
Oct 09 PHP
怎样在php中使用PDF文档功能
Oct 09 PHP
Search File Contents PHP 搜索目录文本内容的代码
Feb 21 PHP
查找php配置文件php.ini所在路径的二种方法
May 26 PHP
PHP文件上传判断file是否己选择上传文件的方法
Nov 10 PHP
php文件操作之小型留言本实例
Jun 20 PHP
Smarty简单生成表单元素的方法示例
May 23 PHP
php抽象方法和抽象类实例分析
Dec 07 PHP
Zend Framework路由器用法实例详解
Dec 11 PHP
php实现购物车功能(以大苹果购物网为例)
Mar 09 PHP
php实现等比例压缩图片
Jul 26 PHP
PHP5.6读写excel表格文件操作示例
Feb 26 PHP
PHP chunk_split()函数讲解
Feb 12 #PHP
Ajax+PHP实现的删除数据功能示例
Feb 12 #PHP
PHP chr()函数讲解
Feb 11 #PHP
PHP chop()函数讲解
Feb 11 #PHP
PHP bin2hex()函数基础实例讲解
Feb 11 #PHP
Ajax+PHP实现的分类列表框功能示例
Feb 11 #PHP
Ajax+PHP实现的模拟进度条功能示例
Feb 11 #PHP
You might like
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
Python中类的继承代码实例
2014/10/28 Python
python实现手机销售管理系统
2019/03/19 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
应聘自荐信
2013/12/14 职场文书
三年级科学教学反思
2014/01/29 职场文书
法律进社区实施方案
2014/03/21 职场文书
单位授权委托书范文
2014/08/02 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
党小组评议意见
2015/06/02 职场文书
小学英语听课心得体会
2016/01/14 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
element tree树形组件回显数据问题解决
2022/08/14 Javascript