0

¡Hola! Tengo un select html que necesito rellenar automáticamente al cargar el formulario. No es de los que se cargan en base a un select fijo. Contendrá las categorías a las que pertenece una nueva subcategoría. Dichas categorías vienen de la base de datos. Estoy tratando de hacerlo todo con fetch() de javascript.

Logro que me llegue la información correctamente y la muestro por consola y hasta me muestra ya sea el innerHTML de cómo se supone que ha quedado ese select o por separado el text y el value sin ningún problema...

He probado así...

//Detectamos el formulario y lo guardamos en una constante
const formulario = document.querySelector('#formularioCrearSubcategoria');

//Vamos a rellenar el select automáticamente.
const select = document.querySelector("#nombreCategoria"); //Obtenemos el select

var url = "../Modelo/CRUD_Categorias_Modelo.php";  //Si no recibe parámetros, devuelve todas las categorías
fetch(url, {
    method: 'POST',
    data: select
})
.then(res => res.json())
.then(lista_de_categorias => {
    console.log("Las categorías son:",lista_de_categorias);
    
    for(let categoria of lista_de_categorias) {
        let nuevaOpcion = document.createElement("option");
        nuevaOpcion.value = categoria.ID_CATEGORIA;
        nuevaOpcion.text = categoria.NOMBRE_CATEGORIA;
        select.add(nuevaOpcion);

        alert(select.options[0].text);
        alert(select.options[1].text);
        alert(select.innerHTML);
        console.log(select.options[0].text); // Selecciona categoría padre
        console.log(select.options[1].text);// Test
        console.log(select.innerHTML); /* Resultado en consola:
                                       <option value="-">Selecciona categoría padre</option>
                                   <option value="3">Test</option>
                                       */
    }
})
.catch(function (error) {
    console.error("¡Error!", error);
})

Mismo resultado usando select.appendChild(nuevaOpcion) en lugar de select.add(nuevaOpcion).

También he probado así (dentro del for, escribiendo el siguiente código), que para mostrar en una tabla todos los datos me funciona sin fallos:

select.innerHTML +=
`
<option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
`;

Lo de += es porque quiero que la la primera , la que no tiene ningún id de categoría asignado a su valor, sino un -, se mantenga.

Sin embargo de todas esas maneras tengo exactamente el mismo resultado por consola o alert, pero en el resultado de la página NADA CAMBIA. Ni visualmente, ni en el código interno, ni nada...

Obtengo EXACTAMENTE el mismo resultado creando una función constante fuera del fetch y de su correspondiente catch a la que le pongo el mismo for para la lista que recibe como parámetro.

.then(lista_de_categorias => {
    console.log("Las categorías son:",lista_de_categorias);
    mostrar_categorias_en_select(lista_de_categorias);
})

La función constante:

const mostrar_categorias_en_select = (lista) => {
    for(let categoria of lista) {
         select.innerHTML +=
        `
        <option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
        `;
        alert(select.options[0].text);
        alert(select.options[1].text);
        alert(select.innerHTML);
        console.log(select.options[0].text);
        console.log(select.options[1].text);
        console.log(select.innerHTML);
    }
}

Mismo resultado en las otras 2 opciones de código que he comentado arriba.El archivo javascript es llamado al final de la página justo antes de añadir el pie de página. Con lo cuál el formulario ya ha terminado de cargar y se supone que puede empezar a modificarse.

3 días atascado sin lograr nada por más vueltas que le doy al código.

¡Muchas gracias por adelantado!

AÑADO EL HTML COMPLETO QUE INCLUYE EL FORMULARIO

<body>
    <h1>Artesanía Los Grande</h1>
    <h2>¡Bienvenid@s a Artesanía Los Grande</h2>

    <div class="contenedor_modal">
        <div class="ventana_modal">
            <div class="cerrar_modal">X</div>
            <h1>Editar Subcategoría</h1>
            <form id="formularioActualizarSubcategoria">
                <input type="text" name="operacion" value="actualizar" hidden>
                <h3 id="idSubcategoriaH">Id</h3>
                <select name="nombreCategoria" id="nombreCategoria">
                    <option value="-">Selecciona categoría padre</option>
                </select>
                <input type="text" name="nombreSubcategoria" id="nombreSubcategoria" class="input_form">
                <input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" class="input_form">
                <input type="input" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
                <input type="input" name="imagen2" id="imagen2" class="input_form"><br>
                <input type="input" name="imagen3" id="imagen3" class="input_form">
                <input type="input" name="imagen4" id="imagen4" class="input_form"><br>
                <input type="input" name="imagen5" id="imagen5" class="input_form">
                <input type="input" name="imagen6" id="imagen6" class="input_form">
                <button type="submit" class="boton_form">Actualizar categoría</button>
                <button type="button" id="cancelar" class="boton_form">Cancelar</button>
            </form>
        </div>
    </div>

    <!-- <div class="contenedor_modal">
        <div class="ventana_modal">
            <div class="cerrar_modal">X</div>
            <h1>Editar Subcategoría</h1>
            <form id="formularioActualizarSubcategoria"><br>
                <input type="text" name="operacion" value="actualizar" hidden>
                <h3 id="idSubcategoriaH">Id</h3>
                <input type="text" name="nombreSubcategoria" id="nombreSubcategoria" class="input_form">
                <input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" class="input_form">
                <input type="input" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
                <input type="input" name="imagen2" id="imagen2" class="input_form"><br>
                <input type="input" name="imagen3" id="imagen3" class="input_form">
                <input type="input" name="imagen4" id="imagen4" class="input_form"><br>
                <input type="input" name="imagen5" id="imagen5" class="input_form">
                <input type="input" name="imagen6" id="imagen6" class="input_form">
                <button type="submit" class="boton_form">Actualizar categoría</button>
                <button type="button" id="cancelar" class="boton_form">Cancelar</button>
            </form>
        </div>
    </div> -->

    <table><br>
        <thead>
            <th>Id</th>
            <th>Nombre de Categoría</th>
            <th>Nombre de Subcategoría</th>
            <th>Descripción</th>
            <th>Imagen Principal</th>
            <th>Imagen 2</th>
            <th>Imagen 3</th>
            <th>Imagen 4</th>
            <th>Imagen 5</th>
            <th>Imagen 6</th>
            <th>Acciones</th>
        </thead>
        <tbody id="tabla_subcategorias">
            <?php
            require_once $carpetas.'Controlador/Subcategorias_Controlador.php';

            $sentencia = new Subcategorias();
            $Subcategorias = $sentencia->getTodasLasSubategorias();

            if(!$Subcategorias) {
                echo '<tr align="center">
                        <td colspan="11">No existe ninguna categoría actualmente.</td>
                    </tr>';
            } else {
                foreach($Subcategorias as $Subcategoria) {
                    $id = $Subcategoria['ID_SUBCATEGORIA'];
                    $nombreCategoria = $subcategoria['ID_CATEGORIA'];
                    $nombre = $Subcategoria['NOMBRE_SUBCATEGORIA'];
                    $descripcion = $Subcategoria['DESCRIPCION_SUBCATEGORIA'];
                    $imagenPrincipal = $Subcategoria['IMAGEN_PRINCIPAL_SUBCATEGORIA'];
                    $imagen2 = $Subcategoria['IMAGEN2'];
                    $imagen3 = $Subcategoria['IMAGEN3'];
                    $imagen4 = $Subcategoria['IMAGEN4'];
                    $imagen5 = $Subcategoria['IMAGEN5'];
                    $imagen6 = $Subcategoria['IMAGEN6'];
    
                    echo "<tr>";
                    echo    "<td>" . $id . "</td>";
                    echo    "<td>" . $nombreCategoria . "</td>";
                    echo    "<td>" . $nombreSubcategoria . "</td>";
                    echo    "<td>" . $descripcion . "</td>";
                    echo    "<td>" . $imagenPrincipal . "</td>";
                    echo    "<td>" . $imagen2 . "</td>";
                    echo    "<td>" . $imagen3 . "</td>";
                    echo    "<td>" . $imagen4 . "</td>";
                    echo    "<td>" . $imagen5 . "</td>";
                    echo    "<td>" . $imagen6 . "</td>";
                    echo    "<td>
                                <button onclick = 'editar($id)'>Editar</button>
                                <button onclick = 'eliminar($id)'>Eliminar</button>
                            </td>";
                    echo "</tr>";
                }
            }
            ?>
        </tbody>
    </table>

    <h1>Nueva Subcategoría</h1>

    <form id="formularioCrearSubcategoria">
        <input type="text" name="operacion" value="crear" hidden>
        <h3 id="idSubcategoriaH"></h3>
        <input type="text" name="nombreSubcategoria" id="nombreSubcategoria" placeholder="Ingresa el nombre de la categoría" class="input_form">
        <select name="nombreCategoria" id="nombreCategoria" class="input_form">
            <option value="-">Selecciona categoría padre</option>
        </select>
        <input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" placeholder="Descripción de la categoría" class="input_form">
        <input type="file" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
        <input type="file" name="imagen2" id="imagen2" class="input_form"><br>
        <input type="file" name="imagen3" id="imagen3" class="input_form">
        <input type="file" name="imagen4" id="imagen4" class="input_form"><br>
        <input type="file" name="imagen5" id="imagen5" class="input_form">
        <input type="file" name="imagen6" id="imagen6" class="input_form"><br>
        <button type="submit">Crear subcategoría</button>
    </form>



    <!-- <form id="formularioCrearSubcategoria"><br>
        <input type="text" name="operacion" value="crear" hidden>
        <h3 id="idSubcategoriaH"></h3>
        <input type="text" name="nombreSubcategoria" id="nombreSubcategoria" placeholder="Ingresa el nombre de la categoría" class="input_form">
        <input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" placeholder="Descripción de la categoría" class="input_form">
        <input type="file" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
        <input type="file" name="imagen2" id="imagen2" class="input_form"><br>
        <input type="file" name="imagen3" id="imagen3" class="input_form">
        <input type="file" name="imagen4" id="imagen4" class="input_form"><br>
        <input type="file" name="imagen5" id="imagen5" class="input_form">
        <input type="file" name="imagen6" id="imagen6" class="input_form"><br>
        <button type="submit">Crear categoría</button>
    </form> -->


    <script src="<?php echo $carpetas ?>js/funciones_AdminSubcategorias.js"></script>

AÑADO EL SCRIPT COMPLETO

//Detectamos el formulario y lo guardamos en una constante
const formulario = document.querySelector('#formularioCrearSubcategoria');


//Vamos a rellenar el select automáticamente.
const select = document.querySelector("#nombreCategoria"); //Obtenemos el select

//var url = "../Modelo/CRUD_Categorias_Modelo.php";
const url = 'https://jsonplaceholder.typicode.com/users'; //  @hawk lo puso  como ejemplo para  comprobar  si funciona.
fetch(url, {
    method: 'GET'
})
.then(res => res.json())
.then(lista_de_categorias => {
    console.log("Las categorías son:",lista_de_categorias);
    alert('HAY ' + lista_de_categorias.length);

    for (let categoria of lista_de_categorias) {
        let nuevaOpcion = document.createElement("option");
        nuevaOpcion.value = categoria.id;
        nuevaOpcion.text = categoria.name;
        //select.add(nuevaOpcion);
        select.appendChild(nuevaOpcion); //<-- Así tambien funciona
        /*select.innerHTML +=
        `
        <option value="${categoria.id}">${categoria.name}</option>
        `;*/
        alert(select.options[0].text);
        alert(select.options[1].text);
        alert(select.innerHTML);
        console.log(select.options[0].text);
        console.log(select.options[1].text);
        console.log(select.innerHTML);
      }

    //mostrar_categorias_en_select(lista_de_categorias);
})
.catch(function (error) {
    console.error("¡Error!", error);
})

const mostrar_categorias_en_select = (lista) => {
    console.log(lista);
    for(let categoria of lista) {
        //document.body.createElement("option");select.innerHTML +=
        console.log(categoria);
        let nuevaOpcion = document.createElement("option");
        nuevaOpcion.value = categoria.ID_CATEGORIA;
        nuevaOpcion.text = categoria.NOMBRE_CATEGORIA;
        select.add(nuevaOpcion);
        /*alert(select.options[0].text);
        alert(select.options[1].text);
        alert(select.innerHTML);
        console.log(select.options[0].text);
        console.log(select.options[1].text);
        console.log(select.innerHTML);*/

        //select.innerHTML = "";

        /* var miOption =*/
        /*select.innerHTML +=
        `
        <option value="${categoria.ID_CATEGORIA}">${categoria.NOMBRE_CATEGORIA}</option>
        `;*/
        alert(select.options[0].text);
        alert(select.options[1].text);
        alert(select.innerHTML);
        console.log(select.options[0].text);
        console.log(select.options[1].text);
        console.log(select.innerHTML);
    }
}

//Queremos escuchar el botón de enviar (el submit)
formulario.addEventListener('submit', (e) => {
    //Con e prevenimos su acción por defecto para que no se envíe
    e.preventDefault();

    //Añadimos los datos del formulario a una variable de tipo FormData (datos de formulario)
    const datosDelFormulario = new FormData(formulario);
    
    //con .get() podemos obtener el valor del input deseado.

    //var nombre = datosDelFormulario.get('nombreSubcategoria');
    //alert(nombre);

    //Creamos una variable que contendrá la dirección donde deberá enviarse el formulario.
    var url = "../Modelo/CRUD_Subcategorias_Modelo.php";

    //Declaramos fetch con la  URL y un json que contiene el método de comunicación, que es POST y el cuerpo, que es el formData que creamos antes.
    fetch(url, {
        method: 'POST',
        body: datosDelFormulario
    })
    .then(res => res.json()) // La respuesta, que es una lista de actualizada de todas las categorías, incluida la que se acaba de crear, la transformamos en un objeto json.
    .then(lista_de_subcategorias => {
        /* for (var i = 0; i < lista_de_categorias.length; i++) {
            console.log(i, lista_de_subcategorias.charAt(i), lista_de_subcategorias.charCodeAt(i));
        } */

        // Mostramos por consola que se ha recibido satisfactoriamente la lista de subcategorías, junto con el json transformado.
        console.log("Datos recibidos:", lista_de_subcategorias);
        mostrar_subcategorias_en_tabla(lista_de_subcategorias); //Le pasamos la lista de categorías a la función mostrar_categorias_en_tabla para que las muestre.
        formulario.reset();//Finalmente, borramos el formulario.
    })
    .catch(function(error){  // Comprobamos si ha habido algún error en alguna de las promesas anteriores o en el propio fetch.
        console.error('¡Error!', error); // Avisamos del error y lo mostramos.
    })
});

//Creamos una constante que mostrará la tabla rellena con todas las categorías obtenidas de la base de datos.
const mostrar_subcategorias_en_tabla = (subcategorias) => {
    let tabla_subcategorias = document.querySelector('#tabla_subcategorias');//Aquí guardamos la tabla, concretamente su body, para operar sobre ella.
    tabla_categorias.innerHTML = ""; //Borramos el contenido del cuerpo de la tabla.

    console.log(subcategorias);

    //Añadiremos la correspondiente información de cada subcategoria que haya en la lista. Añadimos sendos botones a cada categoria para editarla o eliminarla.
    for(let subcategoria of subcategorias) {
        tabla_categorias.innerHTML +=
        `
        <tr>
            <td>${subcategoria.ID_SUBCATEGORIA}</td>
            <td>${subcategoria.ID_CATEGORIA}</td>
            <td>${subcategoria.NOMBRE_SUBCATEGORIA}</td>
            <td>${subcategoria.DESCRIPCION_SUBCATEGORIA}</td>
            <td>${subcategoria.IMAGEN_PRINCIPAL_SUBCATEGORIA}</td>
            <td>${subcategoria.IMAGEN2}</td>
            <td>${subcategoria.IMAGEN3}</td>
            <td>${subcategoria.IMAGEN4}</td>
            <td>${subcategoria.IMAGEN5}</td>
            <td>${subcategoria.IMAGEN6}</td>
            <td>
                <button onclick="editar(${subcategoria.ID_SUBCATEGORIA})">Editar</button>
                <button onclick="eliminar(${subcategoria.ID_SUBCATEGORIA})">Eliminar</button>
            </td>
        </tr>
        `;
    }
}

//Creamos una constante para el primer paso de la edicción de una subcategoría. Se encargará de obtener los datos de esa categoría según su id. Se los pasará a una segunda función de este proceso para guardar los cambios.
const editar = (id) => {
    //alert(id);
    var url = "../Modelo/CRUD_Subcategorias_Modelo.php";

    var datosDelFormulario = new FormData();
    datosDelFormulario.append('operacion', 'editar');
    datosDelFormulario.append('id', id);

    fetch(url, {
        method: 'POST',
        body: datosDelFormulario
    })
    .then(datosSubategoria => datosSubategoria.json())
    .then(subcategoria => {
        console.log('Has elegido a esta subcategoría:', subcategoria);
        actualizarSubcategoria(subcategoria);
    })
    .catch(function (error) {
        console.log("¡Error!", error);
    })
}

//Segunda parte para editar una persona. Recibe los datos de esta persona y los muestra en una ventana modal, dando opción a cambiar todos menos el id, guardar los cambios si ha habido alguno, y actualizar la lista para mostrar los cambios... Y cerrabdi la ventana modal.
const actualizarSubcategoria = (subcategoria) => {
    const contenedor_modal = document.querySelector('.contenedor_modal');//Es la capa externa  de la ventana modal.
    const formularioActualizar = document.querySelector('#formularioActualizarSubcategoria');//El contenido de la ventana modal es éste formulario
    const boton_cancelar = document.querySelector('#cancelar');//Obtenemos el botón cancelar.
    const x_cerrar = document.querySelector('.cerrar_modal');//... Y la X de cerrar
    const idCategoriaH = document.querySelector('#idSubcategoriaH');//Así como un h2 informativo
    //alert(formularioActualizar.nombre.value);

    //Creamos sendas variables locales con los datos de la categoría
    let idSubcategoria = subcategoria[0].ID_SUBCATEGORIA;
    let nombreCategoria = subcategoria[0].ID_CATEGORIA;
    let nombreSubcategoria = subcategoria[0].NOMBRE_SUBCATEGORIA;
    let descripcionSubcategoria = subcategoria[0].DESCRIPCION_CATEGORIA;
    let imagenPrincipalSubcategoria = subcategoria[0].IMAGEN_PRINCIPAL_CATEGORIA;
    let imagen2 = subcategoria[0].IMAGEN2;
    let imagen3 = subcategoria[0].IMAGEN3;
    let imagen4 = subcategoria[0].IMAGEN4;
    let imagen5 = subcategoria[0].IMAGEN5;
    let imagen6 = subcategoria[0].IMAGEN6;

    //Mostramos la ventana modal
    //.body.appendChild(contenedor_modal);
    contenedor_modal.style.display = "block";
    
    //Rellenamos el formulario
    //console.log(persona);
    idSubategoriaH.innerHTML = `Id: ${idSubcategoria}`;
    formularioActualizar.nombreCategoria.value = nombreCategoria;
    formularioActualizar.nombreSubcategoria.value = nombreSubcategoria;
    formularioActualizar.descripcionSubcategoria.value = descripcionSubcategoria;
    formularioActualizar.imagenPrincipalSubcategoria.value = imagenPrincipalSubctegoria;
    formularioActualizar.imagen2.value = imagen2;
    formularioActualizar.imagen3.value = imagen3;
    formularioActualizar.imagen4.value = imagen4;
    formularioActualizar.imagen5.value = imagen5;
    formularioActualizar.imagen6.value = imagen6;

    //Si no hay ningún cambio, cerramos el modal. Si se ha modificado algo, preguntamos si realmente desea cerrar el modal, descartando los cambios, o seguir editando.
    const comprobar_cambios = () => {
    formularioActualizar.imagen2.value = imagen2;
        if(formularioActualizar.nombreCategoria.value !== nombreCategoria || formularioActualizar.nombreSubcategoria.value !== nombreSubcategoria || formularioActualizar.descripcionSubcategoria.value !== descripcionSubcategoria || formularioActualizar.imagenPrincipalSubcategoria.value !== imagenPrincipalSubcategoria || formularioActualizar.imagen2.value !== imagen2 || formularioActualizar.imagen3.value !== imagen3 || formularioActualizar.imagen4.value !== imagen4 || formularioActualizar.imagen5.value !== imagen5|| formularioActualizar.imagen6.value !== imagen6) {
            if(confirm("Has realizado cambios ¿Deseas cerrar sin guardarlos?")) {
                contenedor_modal.style.display = "none";
            }
        } else {
            contenedor_modal.style.display = "none";
        }
    }

    //Si el botón cancelar (o la X de cerrar) se presiona, cerrará el modal, escondiéndolo, o nos dará opción a seguir editando según la función  descrita arriba...
    boton_cancelar.addEventListener('click', () => {
        comprobar_cambios();
        //document.body.removeChild(contenedor_modal);
    })

    x_cerrar.addEventListener('click', () => {
        comprobar_cambios();
    })

    formularioActualizar.addEventListener('submit', (e) => {

        nombreCategoria = formularioActualizar.nombreCategoria.value;
        nombreSubcategoria = formularioActualizar.nombreSubcategoria.value;
        descripcionSubcategoria = formularioActualizar.descripcionSubcategoria.value;
        imagenPrincipalSubcategoria = formularioActualizar.imagenPrincipalSubcategoria.value;
        imagen2 = formularioActualizar.imagen2.value;
        imagen3 = formularioActualizar.imagen3.value;
        imagen4 = formularioActualizar.imagen4.value;
        imagen5 = formularioActualizar.imagen5.value;
        imagen6 = formularioActualizar.imagen6.value;

        e.preventDefault();

        var url = "../Modelo/CRUD_Subcategorias_Modelo.php";

        var datosDelFormulario = new FormData();
        datosDelFormulario.append('operacion', 'actualizar');
        datosDelFormulario.append('idSubategoria', idSubcategoria);
        datosDelFormulario.append('idCategoria', nombreCategoria);
        datosDelFormulario.append('nombreSubcategoria', nombreSubcategoria);
        datosDelFormulario.append('descripcionSubcategoria', descripcionSubcategoria);
        datosDelFormulario.append('imagenPrincipalSubcategoria',imagenPrincipalSubcategoria);
        datosDelFormulario.append('imagen2',imagen2);
        datosDelFormulario.append('imagen3',imagen3);
        datosDelFormulario.append('imagen4',imagen4);
        datosDelFormulario.append('imagen5',imagen5);
        datosDelFormulario.append('imagen6',imagen6);

        console.log(idCategoria);
        console.log(idSubcategoria);
        console.log(nombreSubcategoria);
        console.log(descripcionSubcategoria);
        console.log(imagenPrincipalSubcategoria);
        console.log(imagen2);
        console.log(imagen3);
        console.log(imagen4);
        console.log(imagen5);
        console.log(imagen6);

        fetch(url,{
            method: 'POST',
            body: datosDelFormulario
        })
        .then(res => res.json())
        .then(lista_de_subcategorias => {
            console.log(lista_de_subcategorias);
            mostrar_subcategorias_en_tabla(lista_de_subcategorias);
            contenedor_modal.style.display = "none";
        })
    })
}

const eliminar = (id) => {
    //alert(id);
    var url = "../Modelo/CRUD_Subcategorias_Modelo.php";

    var datosDelFormulario = new FormData();
    datosDelFormulario.append('operacion', 'eliminar');
    datosDelFormulario.append('idSubcategoria', id);

    fetch(url, {
        method: 'POST',
        body: datosDelFormulario
    })
    .then(res => res.json())
    .then(lista_de_subcategorias => {
        console.log('Subcategoría eliminada. Registro  actualizado:', lista_de_categorias);
        mostrar_subcategorias_en_tabla(lista_de_subcategorias);
    })
    .catch(function (error) {
        console.log("¡Error!", error);
    })
}
4
  • pero no explicas que problema tienes? Por lo que he deducido que es que las opciones del select no se cargan en el html?
    – hawks
    el 18 oct. 2020 a las 19:29
  • 1
    Exactamente, @hawks. Creía que quedaba claro al decir que no cambia NADA en el aspecto visual (o sea, en lo que se muestra al usuario) ni en el código interno (la opción de inspeccionar o ver código con el mouse)... Los únicos resultados se muestran por consola o alert, pero en el select en sí nada se puede ver, sólo la opción sin ningún id asocido, osea, la que tiene por defecto y quiero que se mantenga. el 18 oct. 2020 a las 19:33
  • podrías poner el html de tu formulario porque el código javascript parece correcto.
    – hawks
    el 18 oct. 2020 a las 19:38
  • Ya he añadido el código del formulario, @hawks. el 18 oct. 2020 a las 19:44

1 respuesta 1

0

Para reproducir tu código, he usado una API que te devuelve un listado de usuarios y los he cargado en el select. Y se cargan correctamente. Quizá en otro sitio en tu código modificas el contenido de dicho select.

const select = document.querySelector("#nombreCategoria");
const url = 'https://jsonplaceholder.typicode.com/users';

fetch(url, {
    method: 'GET',
  })
  .then(res => res.json())
  .then(lista_de_categorias => {
    // console.log("Las categorías son:", lista_de_categorias);
    // alert('HAY ' + lista_de_categorias.length) Puedes poner este alert para ver si la llamada POST te devuelve algo

    for (let categoria of lista_de_categorias) {
      let nuevaOpcion = document.createElement("option");
      nuevaOpcion.value = categoria.id;
      nuevaOpcion.text = categoria.name;
      select.add(nuevaOpcion);
      // select.appendChild(nuevaOpcion); <-- Así tambien funciona
    }
  })
  .catch(function(error) {
    console.error("¡Error!", error);
  })
<form id="formularioCrearSubcategoria">
  <input type="text" name="operacion" value="crear" hidden>
  <h3 id="idSubcategoriaH"></h3>
  <input type="text" name="nombreSubcategoria" id="nombreSubcategoria" placeholder="Ingresa el nombre de la categoría" class="input_form">
  <select name="nombreCategoria" id="nombreCategoria" class="input_form">
    <option value="-">Selecciona categoría padre</option>
  </select>
  <input type="text" name="descripcionSubcategoria" id="descripcionSubcategoria" placeholder="Descripción de la categoría" class="input_form">
  <input type="file" name="imagenPrincipalSubcategoria" id="imagenPrincipalSubcategoria" class="input_form">
  <input type="file" name="imagen2" id="imagen2" class="input_form"><br>
  <input type="file" name="imagen3" id="imagen3" class="input_form">
  <input type="file" name="imagen4" id="imagen4" class="input_form"><br>
  <input type="file" name="imagen5" id="imagen5" class="input_form">
  <input type="file" name="imagen6" id="imagen6" class="input_form"><br>
  <button type="submit">Crear subcategoría</button>
</form>

5
  • ¡Hola, @hawks ! Al parecer me sigue danto el mismo fallo incluso con la API que usas... Y no tengo otra referencia a dicho select en otras partes del código... El script está en un archivo externo llamado desde debajo del formulario así: <script src="<?php echo $carpetas ?>js/funciones_AdminSubcategorias.js"></script>. Obviamente funciona ya que si no, no pondría nada ni siquiera en consola... Así que el fallo tampoco está en que esté en un archivo externo... $carpetas sólo sirve para poner los ".../" necesarios. el 18 oct. 2020 a las 20:35
  • si ejecutas el código de la respuesta con el botón de "Ejecutar" también te sigue fallando o te falla cuando lo pones en el archivo que comentas. Esto ".../" no sería con así ../ solo con 2 puntos?
    – hawks
    el 18 oct. 2020 a las 20:56
  • disculpa la demora... He estado muy liado. El caso es que me sigue dando el mismo fallo en el archivo que yo tengo... ¿Edito y pongo el archivo completo js y el de los formularios en html, en el que se encuentra en último lugar el formulario de crear subcategoría? el 20 oct. 2020 a las 11:41
  • pues la verdad es que no se que puede ser.
    – hawks
    el 20 oct. 2020 a las 17:02
  • Acabo de poner completo el script y el html a ver si logramos encontrar el error... el 20 oct. 2020 a las 18:37

Tu Respuesta

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

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