Los dos selectores TIPO ("llenar primero") se cargan desde la dB
como en
Llenar selector desde dB ver más detalles
El script asociado a
change en jquery llama por json los
valores del 2º select, pasando por AJAX al script en php un cid que corresponde al tipo que
corresponde en la dB con
encodeURI($('select[id=tipo]').val()).
(encodeURI escapa cualquier caracter que no pasa por post).
procesar.php está explicado en el código.
Para clonar el 2º select usamos
$('#original option').clone().appendTo('#clon')
*********************SCRIPT JQUERY (AJAX)*********************
<script>
$(document).ready(function(){
$( "#tipo" ).change(function() {
$("#esperando").css("visibility","visible");
$.ajax({
type: "POST",
url: "tec-php-llenaselectdeselect-procesar.php",
data: 'tipo=' + encodeURI($('select[id=tipo]').val()),
dataType:'json',
success: function(data) {
$("#esperando").css("visibility","hidden");
$('option', '#detalle').remove();
$.each(data, function(i, item) {
$('#detalle').append($('<option>', {
value: item.iddetalle,
text: item.nombre
}));
});
},
error: function(request,error) {
$("#esperando").css("visibility","visible");
}
}); //fin ajax
}); // fin cambiar select
$( "#original" ).change(function() {
$('option', '#clon').remove();
$('#original option').clone().appendTo('#clon');
}); // fin clonar select
});
</script>
*****SCRIPT PROCESAR.PHP RECIBE ID Y DEVUELVE ARRAY DE ARRAYS***
<?
include("conexion.php"); // abre la conexión a la base de datos
$id=$_POST["tipo"]; // recibe de AJAX el tipo del selector 1
conectar();
$resultado = array(); // defino un array genérico
$sqltxt = "SELECT nombre,cid FROM tabla2 WHERE cid=" . $id . " ORDER BY nombre" ;
$sqldevolucion = mysqli_query($conn,$sqltxt);
if(mysqli_num_rows($sqldevolucion)==0){ // si no hay registros devuelvo el error
array_push($resultado,array("iddetalle" => "0" , "nombre" => "-no hay items-"));
}else{ // si hay registros cargo array de array(2) con cid y nombre
while ($tar = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
array_push($resultado,array("iddetalle" =>$tar["cid"],"nombre" => mb_convert_encoding($tar["nombre"],"UTF-8")));
} // mb_convert_encoding pasa a UTF-8 por si hay ñ o acentos
}
mysqli_close($conn); // cierro conexion
echo(json_encode($resultado)); // devuelvo el vector jsonizado
?>
************************HTML SELECT DE SELECT****************************************
<div>
<select name="tipo" id="tipo" style=" width:150px; height:18px; margin-top:4px; font-size:12px; padding:0px;">
<option value="TODOS">-Elegir primero-</option>
<?
conectar();
$sqltxt = "SELECT id,nombre FROM tabla1 ORDER BY nombre";
$sqldevolucion = mysqli_query($conn,$sqltxt);
while ($prove = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
?>
<option value="<? echo $prove["id"] ?>"><? echo $prove["nombre"] ?> </option>
<?
}
mysqli_free_result($sqldevolucion);
?>
</select>
</div>
<div>
<span style=" visibility:hidden;" id="esperando">
<img src="esperando.gif" width="16" height="16" style=" margin-right:5px; " />
</span>
<select class="editarN" type="text" name="detalle" id="detalle" value="0" style="width:150px; " >
<option value="0">-Elegir TIPO primero-</option>
</select>
</div>
************************HTML CLONADO DE SELECT****************************************
<div>
<select name="original" id="original" style=" width:150px; height:18px; margin-top:4px; font-size:12px; padding:0px;">
<?
conectar();
$sqltxt = "SELECT id,nombre FROM tabla1 ORDER BY nombre";
$sqldevolucion = mysqli_query($conn,$sqltxt);
while ($prove = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
?>
<option value="<? echo $prove["id"] ?>"><? echo $prove["nombre"] ?> </option>
<?
}
mysqli_free_result($sqldevolucion);
?>
</select>
</div>
<div>
<select class="editarN" type="text" name="clon" id="clon" value="0" style="width:150px; " >
<option value="0">-Elegir TIPO primero-</option>
</select>
</div>