I have the following problem:
In a form, I need to make a selection of a MANUFACTURER, and according to this selection, it will display the PRODUCTS bound to that manufacturer only.
I have the following table where I register the MANUFACTURER:
FABRICANTES:
id_fabricante | nome_fabricante
1 | CANON
And I have the CAMERAS table, where I link the MANUFACTURER to the camera model
CAMERAS:
id_camera | fabricantes_id_fabricante (chave estrangeira) | modelo_camera
1 | CANON | 5D MARK II
Now that the tricky part comes in, I've created form where it pulls with PHP in the database the registered manufacturers:
<?php
$fabricantes = listaFabricantes($conexao);
?>
...
<tr>
<td>Fabricante:</td>
<td>
<select name="fabricantes_id_fabricante" id="fabricantes_id_fabricante" class="form-control">
<?php
foreach ($fabricantes as $fabricante):
?>
<option value="<?= $fabricante['id_fabricante'] ?>">
<?= $fabricante['nome_fabricante'] ?></br></option>
<?php
endforeach;
?>
</td>
</tr>
...
And then I created the form that lists the cameras:
<tr>
<td>Linha de Câmera:</td>
<td>
<select name="cameras_linhas_id_camera_linha" id="cameras_linhas_id_camera_linha" class="form-control">
<?php foreach($cameras_linhas as $camera_linha) :?>
<option value="<?=$camera_linha['id_camera_linha']?>">
<?=$camera_linha['nome_linha_camera']?></br></option>
<?php endforeach?>
</td>
</tr>
Only what I want to do now is when I select the manufacturer CANON it only appears the cameras that have the relationship with that manufacturer, not that they list all the cameras.
The closest I could do this, was using Jquery as follows:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script>
$('#fabricantes_id_fabricante').change(function(){
selection = $(this).val();
switch(selection)
{
case '1':
$('#cameras_linhas_id_camera_linha').show();
break;
default:
$('#cameras_linhas_id_camera_linha').hide();
break;
}
});
</script>
But in this case above, it only works if SELECTS options are created in form html and not searching the database for the connection.
I know it's a bit long, but could anyone help with an idea of how I could do this Jquery query on the bd to return the results or some other light?
It would be something like what you do from State x City, where you click on a certain state and only the respective cities appear, and that information is fetched from a database. I'm already breaking my head for a couple of days, so I came here.
Thank you in advance.