Es funktioniert!

[Jnnbo]

Hallo BaBa,

danke für deine Geduld und deine ausführlichen Erklärungen.

Das wäre die best practice: Im Event listener change() initial erstmal alles zurücksetzen und dem User durch entsprechende "lädt..."-Texte klarmachen, dass etwas geschieht. Dann im Callback (success() der post-Funktion) Deine Listen wieder befüllen, bzw. im Callback der ersten Liste die change-Funktion der zweiten auslösen. Dazu empfiehlt es sich mal wieder die Funktion, die bei change() ausgeführt werden soll nicht direkt im change() zu notieren.

Hört sich sehr kompliziert an :/ Gibt es dafür irgendein Beispiel? Oder nach was soll ich bei Google suchen? So eine Animation oder Hinweis muss nicht wirklich sein, wäre zwar schön, aber ich denke das wird alles noch komplizierter. Mir würde schon reichen, wenn das dritte Dropdown einfach geleert wird. Das zweite passt sich ja sofort dem ersten an, daher geht es wirklich nur um das dritte.

• entweder die Listen von Anfang bis Ende im DOM haben und nur die Elemente (option) austauschen

Ok, ich habe es nun so abgeändert, mein JS Datei sieht so aus:

    $(document).ready(function(){
		
		$('#hersteller').change(function(){
			$.post(
				'inc/auslesen-serie.php',
				{h_id:$('#hersteller').val()},
			function(res){
				$('#serien').html(res);
			});
		});
		
		$('#serien').change(function(){
			$.post(
				'inc/auslesen-geraete.php',
				{s_id:$('#serien').val()},
			function(res){
				$('#container_geraete').html(res);
			});
		});

    });

Und meine auslesen-serie.php so:

if (isset($_POST['h_id']) && $_POST['h_id'] != ""){
$neu = $_POST['h_id'];
?>
<option>-- Bitte wählen --</option>
<?php 
$serien = serien($mysqli, $neu);
foreach($serien as $array){ ?>
<option value="<?php echo $array['s_id'];?>"><?php echo $array['s_titel'];?></option>
<?php } ?>
<?php } ?>

Und in meiner Hauptdatei steht dieses:

<label for="serie">Serie</label>
<select name="serien" id="serien">
</select>

Klappt soweit auch. So meintest du das doch?