<!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.0">
<title>Document</title>
<style>
.center-content {
text-align: center;
}
.pad-2 {
padding: 2%;
}
.pad-10 {
padding: 10%;
}
.wmx-30 {
max-width: 300px;
}
</style>
<script>
// Aux. func.
// Wrap for document.querySelector()
function qs(nodeSelector, node = null) // js node | null
{
node = (node !== null && node.nodeType !== 1) ? null : node;
return (node || document).querySelector(nodeSelector);
}
// Func to populate a select
function loadSelector(selectNode, arrData) // void
{
console.log('@loadSelector');
if (!selectNode || selectNode.nodeType !== 1) {
console.error('No se ha cargado el nodo "select"');
return;
}
selectNode = resetSelector(selectNode);
for (let i = 0; i < arrData.length; i++) {
const fakeRegionValue = i + 1;
const regionName = arrData[i];
const optionNode = composeOption(fakeRegionValue, regionName);
selectNode.appendChild(optionNode);
}
function composeOption(optionValue, optionText) // js node
{
const option = document.createElement('option');
const optionContent = document.createTextNode(optionText);
option.appendChild(optionContent);
option.setAttribute('value', optionValue);
return option;
}
function resetSelector(selectNode) // js node
{
const firstOption = qs('option', selectNode);
selectNode.innerHTML = null;
selectNode.appendChild(firstOption);
return selectNode;
}
}
</script>
</head>
<body class="pad-10 center-content">
<label for="provincia">Seleccione una Provincia</label>
<select name="provincia" id="provincia" class="pad-2 wmx-30">
<option value="0">Seleccionar...</option>
</select>
<script>
////////////////////////////////////////////////////////////////
// Script functions
function loadOnNaturalOrder(selectNode, arrData) // void
{
console.log('@loadOnNaturalOrder');
loadSelector(selectNode, arrData);
}
////////////////////////////////////////////////////////////////
// Run script
const arrData = [
"Cantabria",
"Asturias",
"Galicia",
"Andalucia",
"Extremadura"
];
const selectNode = qs('select#provincia');
window.onload = () => {
loadOnNaturalOrder(selectNode, arrData);
}
</script>
</body>
</html>
Yo partiría de la estructura base HTML: el select
vacío o bien con el primer option
, que no suele tener un contenido "útil" mas allá de indicar la acción a realizar. He añadido un label
para que la estructura HTML sea "correcta".
Hay un primer bloque <script>
con funciones auxiliares, que pueden reutilizarse para un propósito determinado cuando sea necesario. Las he puesto separadas del script principal si bien su posición en la página no importa demasiado.
El script principal si requiere una posición determinada, en este caso debe situarse siempre por debajo del select
ya que de otra forma la línea:
const selectNode = qs('select#provincia');
Trataría de cargar un elemento de la página que aun no se encuentra en el documento.
En cuanto al código, al cargar la ventana se ejecuta la function que rellena el selector con el array de strings que se le pase en el orden en que están:
window.onload = () => {
loadOnNaturalOrder(selectNode, arrData);
}
lo que hace indirectamente la function auxiliar loadSelector(selectNode, arrData);