Как только жизненно важная часть информации становится известной, она становится довольно простой, и, без сомнения, вы могли бы найти другие примеры chained select using ajax, но непроверенный пример может быть полезен / интересен.
Событие changeв этом случае запускает ajax-запрос к той же самой странице php - php в верхней части скрипта обрабатывает этот запрос POST и использует данные POST для построения пути к следующему исходному файлу меню.
<?php
/* top of same page to the javascript/html */
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['drpcategory'] ) ){
ob_clean();
$category=$_POST['drpcategory'];
$path=$dir.'/template/post/'.$category.'/item.txt';
$item = file($path, FILE_IGNORE_NEW_LINES);
foreach( $item as $item ) printf('<option value="%s">%s',$item,$item);
exit();
}
?>
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>chained select</title>
<script>
const ajax=function( params ){
let xhr=new XMLHttpRequest();
with( xhr ){
onreadystatechange=function(e){
if( this.status==200 && this.readyState==4 ){
document.querySelector('select[name="drpitem"]').innerHTML=this.response
}
}
open( 'POST', location.href, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
document.addEventListener('DOMContentLoaded', event=>{
document.querySelector('select[name="drpcategory"]').addEventListener('change',e=>{
e.preventDefault();
ajax( 'drpcategory='+e.target.value );
},false);
},false );
</script>
</head>
<body>
<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" name="drpcategory" required>
<?php
$category = $dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);
foreach($category as $category) {
printf('<option value="%s">%s',$category,$category);
}
?>
</select>
</div>
<div class="form-group">
<label>Item</label>
<select class="form-control bg-dark btn-dark text-white" name="drpitem"></select>
</div>
</body>
</html>