3

Tengo un formulario en un documento HTML con un campo select donde cargo varias provincias. ¿Es correcta esta forma de cargar las provincias en el Select? Me da error.

<select name="provincia" id="provincia">
    <option value="cargar_provincias();">Seleccione una Provincia...
</select>

function cargar_provincias(){
    var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
    var provincia = document.getElementById("provincia");
    for(var i=0;i<array.length;i++){ 
        provincia.options[i] = new option(array[i]);
     }
}
1

5 respuestas 5

6

Para invocar una función desde un tag HTML debes hacerlo dentro de un evento (onClick="...", onFocus="...", etc.). Si dicha función se debe ejecutar una sola vez te recomiendo colocarla en el evento onLoad="..." del tag <body>.

NOTA:
No necesariamente tienes que usar id para accesar un elemento en el DOM, puedes también hacerlo a través de la propiedad name: document.getElementsByName("...")[0], de esta forma te ahorras codigo al escribir.

Adicionalmente te dejo un ejemplo de:
como agregar opciones a un tag HTML <select> desde un array.

Y también es útil saber como: ordenar el array alfabeticamente.

Ejemplo:

//Codigo a Ejecutar al Cargar la Pagina
function myOnLoad() {
 cargar_provincias()
}

// funcion para Cargar Provincias al campo <select>
function cargar_provincias() {
 var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];

 // Ordena el Array Alfabeticamente, es muy facil ;)):
 array.sort();

 addOptions("provincia", array);
}

// Rutina para agregar opciones a un <select>
function addOptions(domElement, array) {
 var select = document.getElementsByName(domElement)[0];

 for (value in array) {
  var option = document.createElement("option");
  option.text = array[value];
  select.add(option);
 }
}
<body onLoad="myOnLoad()">
 <select name="provincia">
  <option>Seleccione una Provincia...</option>
 </select>
</body>

EDITADO:
Aqui les dejo otro ejemplo utilizando como fuente de los datos provenientes de un elemento JSON en lugar de un array

//Codigo a Ejecutar al Cargar la Pagina
function myOnLoad() {
 cargar_provincias()
}

// funcion para Cargar Provincias al campo <select>
function cargar_provincias() {
 var json = {"Cantabria":"", "Asturias":"", "Galicia":"", "Andalucia":"", "Extremadura":""};

 addOptions("provincia", json);
}

// Rutina para agregar opciones a un <select>
function addOptions(domElement, json) {
 var select = document.getElementsByName(domElement)[0];

 Object.keys(json).forEach(function(elm) {
  var option = document.createElement("option");
  option.text = elm;
  select.add(option);
 })
}
<body onLoad="myOnLoad()">
 <select name="provincia">
  <option>Seleccione una Provincia...</option>
 </select>
</body>

Espero este ejemplo sea una buena ilustración del: como hacerlo, Saludos!! ;))...

2
  • Hola @fwBasic, podria modificar el codigo para cargar el array mediante un JSON, por ejemplo Paises, se lo agradeceria mucho.
    – Ragnar
    Commented el 18 oct. 2021 a las 16:11
  • 1
    Estimado @Nor, he modificado la respuesta añadiendo otro ejemplo que utiliza como fuente de datos un JSON en lugar de un array sin embargo te comento que los datos que tu expones en "Paises" se componen de un array que contiene JSON como elementos, en cuyo caso solo tendrias que agregar el elemento ".nombre" en el ejemplo 1 al momento de recorrer el array reemplazando por: option.text = array[value].nombre; y ya tienes el problema solucionado ;))...
    – fwBasic
    Commented el 20 oct. 2021 a las 6:15
3

un saludo y suerte .

<select name="provincia" id="provincia"></select>
    <script type="text/javascript">
        function cargar_provincias()
        {
            var array = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];
            for(var i in array)
            { 
                document.getElementById("provincia").innerHTML += "<option value='"+array[i]+"'>"+array[i]+"</option>"; 

            }
    }

    cargar_provincias();

    </script>
3

Lo que te recomiendo es que ejecutes la función que se encargará de crear tus elementos {opciones} una vez el documento esté listo, te pongo el ejemplo basándome en tu código y usando un poco de jQuery:

EDIT: como me has dicho que no puedes usar jQuery aquí te dejo un ejemplo con puro JavaScript:

function cargar() {
    var provincias = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"]; //Tu array de provincias
    var select = document.getElementById("provincias"); //Seleccionamos el select
    
    for(var i=0; i < provincias.length; i++){ 
        var option = document.createElement("option"); //Creamos la opcion
        option.innerHTML = provincias[i]; //Metemos el texto en la opción
        select.appendChild(option); //Metemos la opción en el select
    }
}
cargar();
<select id="provincias"></select>

El ejemplo usando jQuery:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="provincias"></select>

JavaScript + jQuery:

$(document).ready(function() {
   var provincias = ["Cantabria", "Asturias", "Galicia", "Andalucia", "Extremadura"];

    for(var i=0; i < provincias.length; i++){ 
        var option = document.createElement("option"); //Creas el elemento opción
        $(option).html(provincias[i]); //Escribes en él el nombre de la provincia
        $(option).appendTo("#provincias"); //Lo metes en el select con id provincias
    }
});

Espero que te sirva de ayuda :)

3
  • podrias ponerlo de tal forma que el ejemplo se reproduzca utilizando el editor de la pagina? Commented el 14 may. 2017 a las 15:42
  • El problema es que en este ejercicio sólo se puede utilizar Javascript, nada de jQuery.
    – omaza1990
    Commented el 14 may. 2017 a las 15:42
  • 1
    @omaza1990 Ya actualicé la respuesta, suerte!
    – lromeraj
    Commented el 14 may. 2017 a las 16:01
1

<!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);

0

La respuesta me sirvio mucho para lograr una idea. Ahora me ocurre un problema que solo puedo llamar a esa funcion una sola vez en un select. Yo tengo un formulario donde hay que seleccionar que club va a ganar, por lo que uso el select permanentemente, pero me deja usarlo solo una vez.

1
  • 1
    Si tienes una nueva pregunta, la puedes formular haciendo clic en el botón Formular una pregunta. Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - Desde revisión
    – padaleiana
    Commented el 25 mar. 2022 a las 18:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.