100行代码实现PHP+AJAX三级联动选择(完整案例)

以下是完整代码html js css php集合到单文件

<?php
$shenx = (isset($_POST["shen"]))?Trim($_POST["shen"]):"";
$cityx = (isset($_POST["city"]))?Trim($_POST["city"]):"";
$xianx = (isset($_POST["xian"]))?Trim($_POST["xian"]):"";
if(stripos("@".$shenx,"@请选择") !== false) $shenx="";
if(stripos("@".$cityx,"@请选择") !== false) $cityx="";
if(stripos("@".$xianx,"@请选择") !== false) $xianx="";
$csvFile = fopen('data.csv', 'r');
$datas = array();
while (($rew = fgetcsv($csvFile,0,"\t")) !== false) { $datas[] = $rew; }
fclose($csvFile);
$Data = array(); $r0 = $datas[0];
$t1 = "请选择".$r0[0]; $t2 = "请选择".$r0[1]; $t3 = "请选择".$r0[2];
 $Data[$t1][$t2][] = $t3;
for($i=1; $i<count($datas); $i++) {
 $row = $datas[$i];
 $shen = $row[0]; $city = $row[1]; $xian = $row[2];
 if (!isset($Data[$shen])) { $Data[$shen][$t2][] = $t3; }
 if (!isset($Data[$shen][$city])) { $Data[$shen][$city][] = $t3; }
  $Data[$shen][$city][] = $xian;
}
?>
<form id="form">
<h1>AJAX多级联动选择</h1>
<select id="shen">
<?php
foreach($Data as $ti => $val){
 if($ti == $shenx){
 echo "<option value=\"$ti\" selected>$ti</option>\r\n"; $shenz=$ti;
 }else{
 echo "<option value=\"$ti\">$ti</option>\r\n";
 }
}
?>
</select>
<select id="city"><?php
if($Data[$shenz]){
foreach($Data[$shenz] as $ti => $val){
 if($ti == $cityx){
 echo "<option value=\"$ti\" selected>$ti</option>\r\n"; $cityz = $ti;
 }else{
 echo "<option value=\"$ti\">$ti</option>\r\n";
 }
}
}else{
 echo "<option value=\"\">请依次选择</option>\r\n";
}
?></select>
<select id="xian"><?php
if($Data[$shenz][$cityz]){
$datar = array_unique($Data[$shenz][$cityz]);
foreach($datar as $val){
 if($val == $xianx){
 echo "<option value=\"$val\" selected>$val</option>\r\n";
 }else{
 echo "<option value=\"$val\">$val</option>\r\n";
 }
}
}else{
 echo "<option value=\"\">请依次选择</option>\r\n";
}
?></select>
</form>
<script>
function $(objId){ return document.getElementById(objId); }

const form = document.querySelector('form');
let timeoutId;
function delayedSubmit() {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
  show('bb',"aa");
  }, 100); //100:0.1秒延时
}
form.addEventListener('change', delayedSubmit);

function show(id,key){
 console.log(id, key);
 var fd = new FormData();
 fd.append('shen',$("shen").value);
 fd.append('city',$("city").value);
 fd.append('xian',$("xian").value);
 post(key, fd, 'form'); //此处参数为网页元素ID
}
function post(act,fd,hid){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(hid == "alert"){
 alert(xhr.responseText);
}else{
 $(hid).innerHTML=xhr.responseText;
}
}
}
};
xhr.open('POST','?Act='+ act,true);
xhr.send(fd);
}
</script>

以下是数据参考，data.csv 

一级	二级	三级	四级
选项1	选项1-1	选项1-1-1	选项1-1-1-1
选项1	选项1-1	选项1-1-1	选项1-1-1-2
选项1	选项1-1	选项1-1-2	选项1-1-2-1
选项1	选项1-1	选项1-1-2	选项1-1-2-2
选项1	选项1-2	选项1-2-1	选项1-2-1-1
选项1	选项1-2	选项1-2-1	选项1-2-1-2
选项1	选项1-2	选项1-2-2	选项1-2-2-1
选项1	选项1-2	选项1-2-2	选项1-2-2-2
选项2	选项2-1	选项2-1-1	选项2-1-1-1
选项2	选项2-1	选项2-1-1	选项2-1-1-2
选项2	选项2-1	选项2-1-2	选项2-1-2-1
选项2	选项2-1	选项2-1-2	选项2-1-2-2
选项2	选项2-2	选项2-2-1	选项2-2-1-1
选项2	选项2-2	选项2-2-1	选项2-2-1-2
选项2	选项2-2	选项2-2-2	选项2-2-2-1
选项2	选项2-2	选项2-2-2	选项2-2-2-2

 

以上代码为完整案例，仅供学习参考。如需个性化整合到自己系统可能需要较多调整。