< html > < head > < meta http-equiv = " Content-Type " content = " text/html; charset=utf-8 " /> <!-------------------------------------------------------------- --省的字段是：province --市的字段是：city --县的字段是：area ---------------------------------------------------------------------------> < script type = " text/javascript " > var xmlHttp;//声明变量 var requestType="";//声明初始类型为空 function createXMLHttpRequest()//定义创建一个跨浏览器函数的开头 { if(window.ActiveXObject)//ActiveXObject对象到找到的时候返回的是真，否则是假 { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//这个是使用IE的方法创建XmlHttp } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest();//这个是使用非IE的方法创建XmlHttp } } function handleStateChange(){//判断返回的一个函数，来确定执行那个的函数 if(xmlHttp.readyState==4) {//4说明是执行交互完毕0 (未初始化)1 (正在装载)2 (装载完毕) 3 (交互中)4 (完成) if(xmlHttp.status==200) {//http的一个报头说明成功找到 if(requestType=="city"){//判断查询的类型 showcity();//返回响应的显示 } else if(requestType="area"){//判断响应的查询的类型 showarea();//返回响应的显示 } } } } function queryCity(citycode){//执行程序查询，查询城市的 createXMLHttpRequest();//调用创建XmlHttp的函数 requestType="city";//表示类型，查询城市处理显示的时候需要用到 var url='data.php?provincecode='+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存 xmlHttp.open("GET",url,true);//建立服务器连接，异步传输tree xmlHttp.onreadystatechange=handleStateChange;//处理这个响应所需要的函数 xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因 } function queryArea(citycode){//查询程序 createXMLHttpRequest();//调用创建XmlHttp的函数 requestType="area";//查询县的 var url="data.php?citycode="+citycode+'&n='+Math.random();//设定URL传值方法同时防止缓存 xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=handleStateChange;//处理响应的函数名 xmlHttp.send(null);//执行程序函数这里的中间的参数是因为GET原因 } function showcity(){//显示函数 document.getElementByIdx_x("city").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据 } function showarea(){ document.getElementByIdx_x("area").innerHTML=xmlHttp.responseText;//捕获ID显示返回的数据 } </ script > </ head > < body > <? php $ conn = mysql_connect ( " localhost " , " root " , " root " );//链接数据库 mysql_select_db ( " novel " );//选择数据库 mysql_query ( " set names 'utf8' " );//设定字符集 $ sql = " select * from province " ;//查询数据库 province 表也就是省 $ result = mysql_query ($ sql );//执行语句赋值给变量 ?> < form id =' form1 ' > <!--输出表单头--> <!--输出下拉列表框，并设定onchange响应事件，把省值传递过去--> < select id =' province ' onchange =' queryCity ( this . options [ this . selectedIndex ]. value )' > <!--输出下拉列表项值--> < option value =' -1 ' selected > 请选择省份 </ option > <? php while ($ row = mysql_fetch_row ($ result )){ //循环循环查询显示省输出数据显示 echo " <option value='$row[1]'>$row[2]</option>\n " ; } ?> </ select > <!--下拉列表项尾数--> < span id =' city ' ></ span > <!--显示数据的城市的位置--> < span id =' area ' ></ span > <!--显示数据的城市的位置--> </ form > <!--表单项结尾--> </ body > </ html >
data.php 代码
<?php $provincecode = $_GET [ ' provincecode ' ] ; //接收省键值 $citycode = $_GET [ ' citycode ' ] ; //接收城市键值 $conn = mysql_connect ( " localhost " , " root " , " root " ) ; //连接主机 mysql_select_db ( " novel " ) ; //选择数据库 mysql_query ( " set names 'utf8' " ) ; if ( $provincecode != "" ){ //如果传递过来的不为空则执行 $sql = " select * from city where provincecode= $provincecode " ; //查询城市符合属于上边传递过来的省的字段 $result = mysql_query ( $sql ) ; //执行SQL查询语句 print_r ( $row ) ; ?> <select οnchange='queryArea(this.options[this.selectedIndex].value)'><!--下拉列表框开头--> <option value='-1' selected>请选择城市</option><!--下拉列表框值开头--> <?php while ( $row = mysql_fetch_row ( $result )){ //循环记录集 ?> <option value=" <?php echo $row [ 1 ] ?>"> <?php echo $row [ 2 ] ?></option> <?php } ?> </select> <?php } ?> <?php if ( $citycode != "" ){ $sql = " select * from area where citycode= $citycode " ; $result = mysql_query ( $sql ) ; echo " <select> \n " ; echo " <option value='-1' selected>请选择县</option> \n " ; while ( $row = mysql_fetch_row ( $result )){ echo " <option value=' $row [1]'> $row [2]</option> \n " ; } echo " </select> \n " ; } ?>
原地址