Primero cree el menú de selección no1 con php como mencionó anteriormente. Luego agregue un eventListener de 'cambio' como:
$('#select1').change(createSelect2);
function createSelect2(){
var option = $(this).find(':selected').val(),
dataString = "option="+option;
if(option != '')
{
$.ajax({
type : 'GET',
url : 'http://www.mitilini-trans.gr/demo/test.php',
data : dataString,
dataType : 'JSON',
cache: false,
success : function(data) {
var output = '<option value="">Select Sth</option>';
$.each(data.data, function(i,s){
var newOption = s;
output += '<option value="' + newOption + '">' + newOption + '</option>';
});
$('#select2').empty().append(output);
},
error: function(){
console.log("Ajax failed");
}
});
}
else
{
console.log("You have to select at least sth");
}
}
Ahora el menú de selección no2 tiene nuevas opciones de acuerdo con la opción seleccionada de selección 1.
Y el archivo php:
<?php
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');
if(isset($_GET['option']))
{
$option = $_GET['option'];
if($option == 1)
{
$data = array('Arsenal', 'Chelsea', 'Liverpool');
}
if($option == 2)
{
$data = array('Bayern', 'Dortmund', 'Gladbach');
}
if($option == 3)
{
$data = array('Aek', 'Panathinaikos', 'Olympiakos');
}
$reply = array('data' => $data, 'error' => false);
}
else
{
$reply = array('error' => true);
}
$json = json_encode($reply);
echo $json;
?>
Por supuesto, utilizo algunos datos de demostración, pero puede hacer que una consulta sql rellene la matriz de $datos allí y enviarlos como json con los encabezados correctos. Finalmente, use algunos js más para el segundo menú de selección:
$('#select2').change(selectSelect2);
function selectSelect2(){
var option = $(this).find(':selected').val();
if(option != '')
{
alert("You selected: "+option);
}
else
{
alert("You have to select at least sth");
}
}
Consulte aquí http://jsfiddle.net/g3Yqq/2/ un ejemplo de trabajo