$(document).ready(function(){
$("#area_form").change(function () {
$("#area_form option:selected").each(function () {
id_area = $(this).val();
$.post("includes/getEspecialidad.php", { id_area: id_area }, function(data){
$("#especialidad_form").html(data);
});
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="styled-select blue semi-square">
<select name="area" id="area_form"> <!--give them a clue-->
<option value="1">Here is the first option</option>
<option value="2">The second option</option>
<option value="3">The third option</option>
</select>
</div>
<select name="especialidades" id="especialidad_form"> <!--give them a clue-->
<option value="0">Select especiality</option>
</select> <!--use the attribute multiple to select ... Give them a clue later on-->
I've been working on a form which includes 2 tag selects, one depending on the other. When the user chooses a certain option (area), the next tag-select should update the info based on the specializations of the area chosen previously.
I use 3 main sections of code: 1.The Jquery part which sends the selected option to the PHP file and gets the data from the array filled in the PHP file.
2.The PHP file which gets the data from the database and set the info that the jquery function is going to display.
I checked at least 5 times the code, but for some reason is not updating the info. I think the problem is in the jquery function, but I don't see to identify what's wrong with it. I've checked the other files as well, and the structure and syntaxis appear to be just fine. Just in case you're wondering: here's the function I to get the data from the database:
public function extraerEp($area){
parent::conectar();
return parent::query("SELECT * FROM especialidades WHERE area='$area' ORDER BY nombre ASC"); //USAR PARA TEST_E P2
parent::cerrar();
}
The php file:
php
<?php //verified
require 'model/usuario.php';
$id_area= $_POST['id_area'];
# Creamos un objeto de la clase usuario
$usuario = new Usuario();
# Llamamos al metodo extraerP para obtener la especialidad
$outcome = $usuario -> extraerEp($id_area);
$html="<option value='0'>Seleccionar especialidad</option>";
while($row = $outcome->fetch_assoc())
{
$html.= "<option value='".$row['id']."'>".$row['nombre']."</option>";
}
echo $html;
?>
</div>