设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 785|回复: 0

[经验分享] php+Javascript+AJAX实现的无刷新省市县三级下拉列表

[复制链接]
zzgzyyz

尚未签到
发表于 2017-4-13 08:56:46 | 显示全部楼层 |阅读模式
　　帖出主要代码
　　php

<?php
require 'db.php';
?>
<?php
function getCity($fatherid){
if($fatherid)
{
$citys=array();
$rs=mysql_query("select * from city where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$citys[]=array('cityid'=>$row['cityID'],'city'=>iconv('GBK','UTF-8',$row['city']));
}
echo json_encode($citys);
}
}
function getArea($fatherid){
if($fatherid)
{
$areas=array();
$rs=mysql_query("select * from area where father=$fatherid;");
while($row=mysql_fetch_array($rs))
{
$areas[]=array('areaid'=>$row['areaID'],'area'=>iconv('GBK','UTF-8',$row['area']));
}
echo json_encode($areas);
}
}
if(isset($_REQUEST['action'])&&$_REQUEST['action']!='')
{
switch ($_REQUEST['action'])
{
case 'city':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getCity($_REQUEST['id']);
break;
case 'area':
if(isset($_REQUEST['id'])&&$_REQUEST['id']!='')
getArea($_REQUEST['id']);
break;
}
}
?>
　　HTML与JavaScript

<?php
require 'db.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"><!--
var xmlHttp;
function clsopt(opt)
{
if(opt)
{
//清除县/区列表内容并设置为默认值
var length=opt.length;
for(var i=length-1;i>0;i--)
{
opt.remove(i);
}
}
}
function valid(opt)
{
if(opt.options[opt.selectedIndex].value=='')
{
alert('请选择县/区');
return false;
}
}
function createXMLHttpRequest()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
var aVersions = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i=0; i<aVersions.length; i++)
xmlhttp = new ActiveXObject(aVersions);
}
if (xmlhttp!=null)
{
return xmlhttp;
}
else
{
alert("你的浏览器不支持 XMLHTTP.");
}
}
function queryCity(opt)
{
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择省');
clsopt(document.getElementById("areaCity"));
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="city";
var url="getcity.php?action=city&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function queryCountry(opt)
{
id=opt.options[opt.selectedIndex].value;
if(id=='')
{
alert('请选择市/区');
clsopt(document.getElementById("areaCountry"));
return false;
}
xmlHttp=createXMLHttpRequest();
type="country";
var url="getcity.php?action=area&id="+id;
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("GET",url,true);
xmlHttp.send('');
}
function statechange()
{
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
if(type=="city")
{
showCity();
}
else if(type="country")
{
showCountry();
}
}
}
function showCity(){
var cityopt=document.getElementById("areaCity");
var citys=eval('('+xmlHttp.responseText+')');
//cityopt.innerHTML="";
//刷新市/区列表内容并设置为默认值
clsopt(cityopt);
var str="";
for(i in citys)
{
cityopt.options.add(new Option(citys.city,citys.cityid));
str+=citys.city;
}
clsopt(document.getElementById("areaCountry"));
}
function showCountry(){
var areaopt=document.getElementById("areaCountry");
//刷新县/区列表内容并设置为默认值
clsopt(areaopt);
var areas=eval('('+xmlHttp.responseText+')');
for(i in areas)
{
areaopt.options.add(new Option(areas.area,areas.areaid));
}
}
-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
<div>
<span id="" class="">
省/直辖市（必选）：<select name="areaProvince" id="areaProvince" onchange="queryCity(this)" >
<option  value="" selected="selected" >请选择省份</option>
<?php
$rs=mysql_query("select * from province;");
?>
<? while($row=mysql_fetch_array($rs)){ ?>
<option value="<?=$row['provinceID'];?>" ><?=$row['province'];?></option>
<? };?>
</select>
</span>
<span id="" class="">
市/地区（必选）：<select id="areaCity" name="city" onchange="queryCountry(this)" >
<option value=""  selected="selected" >请选择市/地区</option>
</select>
</span>
<span id="" class="">
县/地区（必选）：<select id="areaCountry" name="area"  onchange="valid(this)" >
<option  value="" selected="selected" >请选择县/地区</option>
</select>
</span>
</div>
</body>
</html>

　　附件包含完整项目代码与数据库

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-364200-1-1.html 上篇帖子： MongoDB:PHP中存储和调用server side 自定义函数 下篇帖子： html,php,asp,jsp禁止缓存的方法 (防止页面缓存的方法)
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表