PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果

本文链接：https://blog.csdn.net/gaofei019/article/details/6213463

连接数据库：db.php

<?php
$dbhost="localhost";
$dbpassword="123";
$dbuser ='root';//数据库用户名
$dbname = 'center';//数据库名
$dbcharset = 'gbk';//数据库编码,不建议修改

mysql_connect($dbhost,$dbuser,$dbpassword);
mysql_query("set names $dbcharset");
mysql_select_db($dbname);s
error_reporting(E_ALL);
?>

显示页面：city.php

<?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" src="getcity.js"></script>
<script type="text/javascript" src="getnews.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>配送范围、资费</title>

</head>
<body>

<P>
<H3 style="font-size:16px;">配送范围、资费及配送时间</H3>

            <ul style="width:1024px; list-style-type:none;">

                 <li style="float:left;"> <span style="font-size:14px"> 省/直辖市（必选）：</span><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>

        </li>




     <li style="float:left;">
                 <span id="shi" style="display:none;">
     <table border="0" cellpadding="0" cellspacing="0">
     <tbody>
     <tr>
                  <td style="font-size:14px">市/地区（必选）：</td>
      <td><select id="areaCity" name="city" onChange="queryCountry(this)" style="display:none" >
                     <option value="" selected="selected" >请选择市/地区</option>
                  </select></td>
    </tr>
    </tbody>
    </table>
                </span>
    </li>



    <li style="float:left;">
                <span id="xian" style="display:none; float:left;">
    <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
                  <td style="font-size:14px">县/地区（必选）：</td>
      <td><select id="areaCountry" name="area" οnchange="showUser(this.value)" style="display:none" >
                       <option value="" selected="selected">请选择县/地区</option>
                     </select></td>
                </tr>
    </tbody>
    </table>
       </span>
    </li>
  </ul>

</ul>

</body>
</html>

省市县三级联动：

php部分 getcity.php

<?php
require 'db.php';

AJAX部分 getcity.js

// JavaScript Document
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)
{   document.getElementById("shi").style.display = "block";
    document.getElementById("areaCity").style.display = "block";
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)
{   document.getElementById("xian").style.display = "block";
    document.getElementById("areaCountry").style.display = "block";
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));
}
}
-->

获得地区的运费信息:

php部分 getnews.php

<?
       $q=$_GET["q"];

  $con=mysql_connect('localhost', 'root', '123');
  mysql_query("set names 'utf8'");
  if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

  mysql_select_db("center", $con);

  $sql="SELECT * FROM `info` WHERE fatherID=$q ";

  $result = mysql_query($sql);

  echo "
   <table border=0 cellpadding=2 cellspacing=1 bgcolor='#B6B3AB' style='text-align:center'>
    <tr bgcolor='#b1c8d6' >


    <th>送货方式</th>
    <th>配送范围</th>
    <th>配送费</th>
    <th>商品出库后配送时限 </th>

    </tr>";

  while($row = mysql_fetch_array($result))
   {
    echo "<tr bgcolor='#ffffff' >";
    //echo "<td>" . $row['storehouse'] . "</td>";
    echo "<td>" . $row['method_1'] . "</td>";
    echo "<td>" . $row['range_1'] . "</td>";
    echo "<td>" . $row['charge_1'] . "</td>";
    echo "<td>" . $row['timelimit_1'] ."</td>";
    //echo "<td>" . $row['change'] . "</td>";
   // echo "<td>" . $row['pos'] . "</td>";
    echo "</tr>";
   }
  echo "</table>";

  mysql_close($con);

AJAX部分 getnews.js

// JavaScript Document

var xmlHttp

function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getnews.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}