Si se preguntan Cómo llenar un select en Laravel, aquí tenemos la respuesta y veremos que es muy sencillo integrarlo y vamos a exponer 2 ejemplos: usando un array y datos de una base de datos.
Cómo llenar un select en Laravel
A continuación, veremos 4 pasos que nos servirá para lograr poblar una etiqueta de lista desplegable (SELECT TAG)
Paso 01: Crear el Modelo y Migración
Nos apoyaremos de la terminal de visual studio code o en su consola preferida para generar el modelo y la migración.
php artisan make:model Ciudad -mDatos del Modelo de ciudades
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Ciudad extends Model
{
use HasFactory;
public $fillable = ['name'];
}Contenido de la Migración ciudad
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::create('ciudads', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->timestamps();
});
}
public function down(): void
{
Schema::dropIfExists('ciudads');
}
};Una vez creado y actualizada la información de la migración podemos usar la siguiente línea de comando en nuestro editor vscode para compilar la tabla e insertarlo en MySQL u otro gestor de datos.
php artisan migratePaso 02: Crear la Ruta
Las rutas son importantes para que este ejemplo sea visible en el navegador y se debe de configurar en la siguiente ruta.
routes/web.php
<?php
use App\Http\Controllers\CiudadController;
use Illuminate\Support\Facades\Route;
Route::resource('/dashboard/ciudades', CiudadController::class);
Paso 03: Creación del controlador
Usaremos la siguiente linea de comando para generar un controlador en nuestro proyecto.
php artisan make:controller CiudadController --model=CiudadContenido del controlador
<?php
namespace App\Http\Controllers;
use App\Models\Ciudad;
use Illuminate\Http\Request;
class CiudadController extends Controller
{
public function index()
{
$ciudades = Ciudad::all();
return view("admin.ciudades.index", compact('ciudades'));
}
}Paso 04: Crear del archivo Blade
Podemos crearlo de manera manual en la carpeta resources/views
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Llenar select en Laravel - Baulphp.com </title>
</head>
<body class="sidebar-mini">
<section class="px-2 pt-2 mx-2 bg-white">
<div class="card p-3">
<form action="" method="POST" enctype="multipart/form-data">
@csrf
<div class="row mt-3">
<div class="col-md-12">
<label for="">Titulo</label>
<input type="text" class="form-control" name="title" value="">
</div>
<div class="col-md-12">
<label for="">Lista de Ciudades</label>
<select name="" class="form-control">
<option value="">Seleccione</option>
@foreach ($ciudades as $value)
<option value="{{ $value->id }}">{{ $value->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6">
<div class="flex justify-end">
<button class="btn btn-primary">
Guardar
</button>
</div>
</div>
</div>
</form>
</div>
</section>
</body>
</html>Con estos 4 pasos hemos completado los puntos importantes para llenar un select en Laravel 11
Formas de llenar un select en Laravel
Para llenar un select debemos de declararlo en nuestro archivo controlador. Por lo tanto, en líneas arriba hemos creado el controlador llamado: CiudadController
En la función index podemos declarar como se llenará y pude ser de dos tipos:
- Primera forma: Llenar select con un array
- Segunda forma: Usando datos de una base de datos
En esta parte tenemos que hacer una consulta SQL a través de Query Builder o eloquent de Laravel.
Básicamente, la configuración es en el controlador CiudadController, veamos su contenido.
Llenar un select en laravel usando Array
En este caso ya no se usará base de datos sino un array personalizado como ser una lista de países, etc.
- Además, solo debemos de realizar 2 modificaciones tanto en el controlador como en el blade.
- Modificamos nuestro controlador de la siguiente, manera en la función index()
- Editamos el blade en el foreach para que reciba datos del array personalizado
<?php
namespace App\Http\Controllers;
use App\Models\Ciudad;
use Illuminate\Http\Request;
class CiudadController extends Controller
{
public function index()
{
$data = collect([
['id_ciudad' => '1', 'nombre' => 'Argentina'],
['id_ciudad' => '2', 'nombre' => 'Colombia'],
['id_ciudad' => '3', 'nombre' => 'Chile'],
['id_ciudad' => '4', 'nombre' => 'Ecuador'],
['id_ciudad' => '5', 'nombre' => 'Uruguay'],
]);
$ciudad = $data->pluck('nombre', 'id_ciudad');
$ciudades = $ciudad->all(); // ['1' => 'Argentina', '2' => 'Colombia']
return view("admin.ciudades.index", compact('ciudades'));
}Editamos nuestro blade para que el ciclo foreach acepte el array personalizado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Llenar select en Laravel - Baulphp.com </title>
</head>
<body class="sidebar-mini">
<section class="px-2 pt-2 mx-2 bg-white">
<div class="card p-3">
<form action="" method="POST" enctype="multipart/form-data">
@csrf
<div class="row mt-3">
<div class="col-md-12">
<label for="">Lista de Ciudades</label>
<select name="" class="form-control">
<option value="">Seleccione</option>
@foreach ($ciudades as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
</div>
</form>
</div>
</section>
</body>
</html>En Resumen, hemos aprendido a poblar una etiqueta de lista desplegable usando un array o información de una base de datos.
