php+Javascript+AJAX实现的无刷新省市县三级下拉列表

最新推荐文章于 2021-08-05 13:57:29 发布

smcr_hetao

最新推荐文章于 2021-08-05 13:57:29 发布

阅读量740

点赞数

本文链接：https://blog.csdn.net/smcr_hetao/article/details/8110555

版权

帖出主要代码

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[i]);
	}
	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[i].city,citys[i].cityid));
	    str+=citys[i].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[i].area,areas[i].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" οnchange="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" οnchange="queryCountry(this)" >
                     <option value=""  selected="selected" >请选择市/地区</option>
                     </select>
                </span>
                <span id="" class="">
                    县/地区（必选）：<select id="areaCountry" name="area"  οnchange="valid(this)" >
                     <option  value="" selected="selected" >请选择县/地区</option>
                     </select>
                </span>
         </div>

</body>
</html>

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