Llenar un Select HTML con Arrays Asociativos PHP

Un select tiene dos valor que deben ser llenado para que cargue correctamente value y text, crearemos un array asociativo para llenar esos valores con un función  php, 

DETERMINANDO EL ARRAY ASOCIATIVO 

clave y valor:

$regiones=[
   ['id'=>1,'nombre'=>'Arequipa',  'poblacion'=>1109091],
 ['id'=>2,'nombre'=>'Lima',      'poblacion'=>6199091],
 ['id'=>3,'nombre'=>'Cusco',     'poblacion'=>890091    ]
];

Ahora codearemos la funcion que llenarà el select:

FUNCIÓN PARA LLENAR UN SELECT

function llenarSelect($regiones){
    foreach ($regiones as $region)
      $html.= "<option value=".$region['id'].">".$region['nombre']."</option>";
 return $html;
}

Como puede ver, con un foreach recorremos la variable array $regiones que contiene toda la data, y la variable $html concatena los valores para las etiquetas option; y por último retornamos toda la cadena html.

LLENANDO EL SELECT HTML

<select name="select" id="select" onchange="ver()">
   <?php echo llenarSelect($regiones) ?>
</select>

Declaramos el select y llenamos con un echo llamando a la función PHP llenarSelect($regiones) enviandole el arrar definido anteriormente.

Este array puede ser reemplazado por una consulta a una base de datos ya sea MYSQL o cualquier gestor de base de datos; ademas imple mentaremos un evento que nos permita ver que identificador (id) tiene al hacer un click sobre un elemento option.

AGREGANDO EL EVENTO ONCHANGE

Creamos un función llamada ver() en Javascript para lanzar una acción en este caso un alert y que nos permita ver el id.

<script>
function ver(){
    select.addEventListener("change", 
        console.log("Mostrando el id : "+document.getElementById("select").value)
       );
}
</script>

Agregamos un escuchador para el evento change(cambio) y mostramos en la consola del navegador el id accediente a través del ID select.

Leido 14714 veces