Estoy creando un combo con 2 elementos select
, el segundo elemento select
requiere de la selección del primer select
para poner valores por medio de una consulta a base de datos. Para ello necesito recargar la pagina, lo cual no he logrado hacer al momento, el código que tengo es:
Javascript
function seleccionados() {
var gerencia = document.getElementById("gerencia").value;
console.log(gerencia);
$.post("box_administrador.php",{$datosN},function(mensaje){
$("nombre_colaborador").html(mensaje);
})
}
HTML
y PHP
<tr>
<th>Gerencia</th>
<td>
<select id="gerencia" name="gerencia" >
<option value="0">-- Seleccione --</option>
<?php
foreach ($datosG as $dat) {
$gerencia = $dat->gerencia;
?>
<option value="<?php echo $dat->gerencia; ?>" onchange="javascript:seleccionados();"><?php echo utf8_encode($gerencia); ?></option>
<?php } ?>
</select>
</td>
<th>Colaborador</th>
<td>
<select id="nombre_colaborador" name="nombre_colaborador">
<option value="0">-- Seleccione --</option>
<?php
foreach($datosN as $dn){
$nombre = $dn->nombre;
?>
<option value="<?php echo $dn->nombre; ?>"><?php echo utf8_encode($nombre); ?></option>
Las variables $datosN y $datosG son objetos que traen array
de base de datos.
select
dependiente sin necesidad de recargar la página. Aquí mismo hay varias/preguntas respuestas que tratan sobre el tema de los select dependientes. Con Ajax es mucho mejor y más elegante. Recargar la página es siempre molesto y más costoso.