LLENAR UN SELECT SEGÚN DATOS DE OTRO SELECT POR AJAX
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>
						
					
© IQSystems 2023