The following is the complete code html js css php collection into a single file
<?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>The following is the data reference, 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
The above code is a complete case and is for learning reference only. If you want to personalize it and integrate it into your own system, it may require more adjustments.