PHP+JS 实现多级联动查询，选择省市县

 2018-03-31 12:14   999
PHP+JS 实现多级联动查询，选择省市县
文件中包含页面展示效果、页面源码，包含的文件，及JS效果文件，附带全国地区数据表
1.引用

2.引用联动效果的JS文件    


图片1:


图片2:


图片3:


页面头部定义$districtId = $_POST["districtId"] ? $_POST["districtId"] : DistrictRootId);
联动省市县效果页面代码:（本页为修改页面）
                             居住地
                            
                               
                               
                               
                                "/>
                       

ajax.js源码展示
//===========================================================================【级联列表】
//功能：回调并装载数据，用于多级分类或关联数据初始化的时候；
function initLevelData(aimObj,defaultId,url,splitor,isHaveDefaultOption){
 var argLength = initLevelData.arguments.length;
 var theSplitor = (argLength==4)?splitor:",";
 var isHaveOption = (argLength==5)?isHaveDefaultOption:true;
 var beginIndex = (isHaveOption)?1:0;
 
 with(aimObj){
  while(length>beginIndex)
   remove(beginIndex);
  var content = getUrlContent(url, false);
  if(content==null)
   return;
  content = content.replace(/(^\s*)|(\s*$)/g,"");
  if(content.length==0)
   return;
  var ary = content.split(theSplitor);
  var index = 0;
  for(var i=0,j=0; i
   if(isHaveOption){
    options[j+1]=new Option(ary[i+1], ary[i], false, (ary[i]==defaultId));
   }else{
    options[j]=new Option(ary[i+1], ary[i], false, (ary[i]==defaultId));
   }
  }
 }
}
//功能：回调并装载数据，用于级联调用的时候；
function changeRelationData(srcObj,srcErrorValue,relationObj,url,splitor,isHaveDefaultOption){
 var argLength = changeRelationData.arguments.length;
 var theSplitor = (argLength==5)?splitor:",";
 var isHaveOption = (argLength==6)?isHaveDefaultOption:true;
 var beginIndex = (isHaveOption)?1:0;
 
 with(relationObj){
  while(length>beginIndex)
   remove(beginIndex);
  if(srcObj.value==srcErrorValue){
   return;
  }
  var content = getUrlContent(url, false);
  if(content==null)
   return;
  content = content.replace(/(^\s*)|(\s*$)/g,"");
  if(content.length==0)
   return;
  var ary = content.split(theSplitor);
  for(var i=0,j=0; i
   if(isHaveOption){
    options[j+1]=new Option(ary[i+1], ary[i]);
   }else{
    options[j]=new Option(ary[i+1], ary[i]);
   }
  }
 }
}
//功能：回调并装载数据，用于多级分类调用的时候，控制同一个隐藏字段；
//调用：01、没有级联变化，第一级：changeLevelData(srcObj,srcErrorValue,aimObj,null,childObj,url);
// 02、带有级联变化，第二级：changeLevelData(srcObj,srcErrorValue,aimObj,parentObj,childObj,url);
// 03、没有级联变化，第三级：changeLevelData(srcObj,srcErrorValue,aimObj,parentObj);
function changeLevelData(srcObj,srcErrorValue,aimObj,parentObj,childObj,url,splitor,isHaveDefaultOption){
 var argLength = changeLevelData.arguments.length;
 var isEnabledParentControl = (parentObj!=null);
 var isEnableRelatedControl = (argLength>4);
 var theSplitor = (argLength==7)?splitor:",";
 var isHaveOption = (argLength==8)?isHaveDefaultOption:true;
 var beginIndex = (isHaveOption)?1:0;
 
 if(!isEnableRelatedControl){
  if(isEnabledParentControl){
   if(srcObj.value==srcErrorValue){
    aimObj.value = parentObj.value;
   }else{
    aimObj.value = srcObj.value;
   }
  }else{
   aimObj.value = srcObj.value;
  }
  return;
 }
 
 with(childObj){
  while(length>beginIndex)
   remove(beginIndex);
  if(srcObj.value==srcErrorValue){
   aimObj.value = ""
   return;
  }else{
   aimObj.value = srcObj.value;
  }
  var content = getUrlContent(url, false);
  if(content==null)
   return;
  content = content.replace(/(^\s*)|(\s*$)/g,"");
  if(content.length==0)
   return;
  var ary = content.split(theSplitor);
  for(var i=0,j=0; i
   if(isHaveOption)
    options[j+1]=new Option(ary[i+1], ary[i]);
   else
    options[j]=new Option(ary[i+1], ary[i]);
  }
 }
}
//===========================================================================【Ajax调用函数】
//功能：发送 Get 请求，可指定是否以异步方式发送，同步方式有返回值，异步方式无返回值；
function getUrlContent(url, isAsynchronous){
 isAsynchronous = (getUrlContent.arguments.length==2)?isAsynchronous:false;
 var xmlHttp = getXmlHttp();
 
 if (!xmlHttp) return false;
    xmlHttp.open("GET", url, isAsynchronous);
 xmlHttp.setRequestHeader("Cache-Control", "no-cache");
    xmlHttp.send(null);
 
 if(!isAsynchronous){ // 同步方式；
  return xmlHttp.responseText;
 }
}
//功能：以异步方式，发送 Get 请求，同时指定回调函数，并返回 xmlHttp 对象以供回调函数使用；
function getUrlContentWithCallback(url, callback){
 var xmlHttp = getXmlHttp();
 
 if (!xmlHttp) return false;
 xmlHttp.onreadystatechange = eval(callback);
 xmlHttp.open("GET", url, true); // 异步方式；
 xmlHttp.setRequestHeader("Cache-Control", "no-cache");
 xmlHttp.send(null);
 
 return xmlHttp;
}
//功能：创建 xmlHttp 对象；
function getXmlHttp(){
 var xmlHttp = false;
 
 if(window.XMLHttpRequest) { // Mozilla 浏览器
  xmlHttp = new XMLHttpRequest();
 }else if(window.ActiveXObject) { // IE浏览器
  var aVersions = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0; i
   try {
    xmlHttp = new ActiveXObject(aVersions[i]);
   }catch(e) {
    xmlHttp = false;
   }
  }
 }
 
 return xmlHttp;
}
//功能：动态载入 Js 脚本；
function getScript(jsPath, callback){
 var isEnableCallback = (getScript.arguments.length==2);
 var script = window.jsloader;
 if(!script){
  script = document.createElement("script");
  script.src = jsPath;
  script.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(script);
  window.jsloader = script;
 }else{
  script.src = jsPath;
 }
 if(isEnableCallback){
  if (document.all){
            script.onload = function(){ eval(callback); };
        }else{
   script.onreadystatechange = function(){
                if (this.readyState=="loaded" || this.readyState=="complete"){ eval(callback); }
            };
        }
 }
}

include.php源码展示
define('DistrictRootId','0');
define('DistrictRootName','[根分类]');
define('DistrictLevelLength','2');
define('DistrictLevelMax','4');
define('DistrictLevelMinCode',"10");
define('DistrictLevelMaxCode',"99");
function showDistrictInSelect($con, $parentId, $defaultId){
    if (!StringUtil::isEmpty($parentId)) {
        $sql = "SELECT districtId,name FROM district WHERE parentId='". $parentId ."'";
  $sql .= " ORDER BY orderNumber ASC,districtId ASC";
        $st = $con->query($sql);
        $res = $st->fetchAll();
        foreach ($res as $line){
         echo HtmlUtil::generateOption($line['districtId'], $line['name'], StringUtil::isSame($defaultId, $line['districtId']));
        }
    }
}
function getDistrictId($districtId, $level){
 if ($level<1) {
  return DistrictRootId;
 }else{
        if (!StringUtil::isSame($districtId, DistrictRootId)) {
            return StringUtil::left($districtId, DistrictLevelLength*$level);
        }else{
            return '';
        }
 }
}
function getDistrictName($con, $districtId){
 if (StringUtil::isSame($districtId, DistrictRootId)) {
  $name = DistrictRootName;
 }else{
  $sql = "SELECT name FROM district WHERE districtId='". $districtId ."'";
  $st = $con->query($sql);
  $res = $st->fetch();
  $name = $res["name"];
 }
 return $name;
}
function getDistrictLevel($districtId){
 return strlen($districtId)/DistrictLevelLength;
}
?>

change_by_parent.php源码展示
require_once $_SERVER['DOCUMENT_ROOT'].'/include/config.php';//数据库链接及系统配置文件，此处根据不同系统不一样
require_once $_SERVER['DOCUMENT_ROOT'].'/include/common/include.php';
$parentId = WebUtil::getIntString("parentId", "0");
$con = ConnectionUtil::getConnection();
$sql = "SELECT districtId,name FROM district WHERE parentId='". $parentId ."'";
$sql .= " ORDER BY orderNumber ASC,districtId ASC";
$st = $con->query($sql);
$res = $st->fetchAll();
$isFirst = true;
$output = '';
foreach ($res as $line){
 if ($isFirst) {
  $output = $line['districtId'] . "," . $line["name"];
  $isFirst = false;
 }else{
  $output .= "," . $line["districtId"] . "," . $line["name"];
 }
}
ConnectionUtil::close($con);
die($output);
?>