Confira abaixo Código:
Código da primeira caixa de listagem Ficaria conforme abaixo:
<form id="form1" name="form1" method="post" action="<?php $_SERVER['PHP_SELF']?>">
Drop1
<?php
$mysqli = new mysqli("localhost", "root", "", "lists");
$result = $mysqli->query("SELECT * FROM main_list GROUP BY id ORDER BY id");
$option = '';
while ($row = $result->fetch_assoc()) {
$option .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
}
?>
<select id="main" name="main">
<option selected=selected>Choose</option>
<?php echo $option; ?>
</select>
<div id="sublist"></div>
<input type="submit" name="submit" value="Submit" />
</form>
Código Jquery Ficaria conforme abaixo:
$('#main').change(function(){
$.ajax({
url : 'secondlist.php',
data :{mainlist_id : $(this).val()},
dataType:'html',
type:'POST',
success:function(data){
$('#sublist').html(data);
}
});
});
Código em secondlist.php página :
$mysqli = new mysqli("localhost", "root", "", "lists");
$result1 = $mysqli->query("SELECT * FROM sub_list as s, main_list as m where s.category_id = m.id and s.category_id = $_POST['mainlist_id'] GROUP BY value ORDER BY id ");
$option1 = '';
while ($row = $result1->fetch_assoc()) {
$option1 .= '<option value = "'.$row['value'].'">'.$row['value'].'</option>';
}
$output = 'Drop2 ';
$output .= '<select name="sub" id="sub">';
$output .= '<option value=" " disabled="disabled" selected="selected">Choose one</option>';
$output .= $option1;
$output .= '</select> ';
echo $output;
exit;
?>
Algumas mudanças podem ser necessárias relacionadas aos seus requisitos, mas definitivamente funcionará para você.
Deixe-me saber se você tem alguma dúvida!
Obrigado!