Utilice las fechas de un archivo de texto como opciones para una lista desplegable

Estoy haciendo una simulación de precios y creando una página para ello. La página preguntará qué año le gustaría simular al usuario y el tipo de simulación a hacer (mensual/semana)

Basado en las entradas del usuario, la página abrirá el archivo de texto que tiene nombres de archivo como este

2015_monthly.txt
2015_weekly.txt
2014_monthly.txt
2014_weekly.txt

Cada archivo contiene fechas de cuándo terminaría la simulación. Por ejemplo en 2015_mestral. Txt

2015-01-30
2015-02-28
2015-03-31
.
.
.

Lo que me gustaría hacer es pedirle al usuario que elija una fecha del archivo de texto. Me gustaría hacer esto en una lista desplegable que contiene las fechas del archivo y utilizarlas como opciones de una lista desplegable. ¿Cómo puedo traducir esto en un código html?

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codesculptor3f6e

2 Respuestas:

  • Puedes lograr esto utilizando JavaScript para leer el archivo de texto y luego agregar las fechas como opciones a una lista desplegable en HTML. Aquí tienes un ejemplo de cómo hacerlo:

    • Crear un archivo HTML con un elemento select para representar la lista desplegable:
    html





Seleccionar Fecha

    • Crear un archivo de JavaScript (script.js) para leer el archivo de texto y agregar las fechas como opciones al elemento select:
    javascript
document.addEventListener('DOMContentLoaded', function() {
    const select = document.getElementById('fecha');
    const archivo = '2015_monthly.txt';
    


    fetch(archivo)
        .then(response => response.text())
        .then(data => {
            const lineas = data.trim().split('\n');
            lineas.forEach(fecha => {
                const opcion = document.createElement('option');
                opcion.text = fecha;
                opcion.value = fecha;
                select.add(opcion);
            });
        })
        .catch(error => {
            console.error('Error al leer el archivo:', error);
        });
});

    En este ejemplo, se crea una solicitud a través de fetch para leer el contenido del archivo especificado. Luego, se divide el contenido en líneas y se agrega cada línea como una opción a la lista desplegable.

    Recuerda reemplazar 2015_monthly.txt con el nombre correcto de tu archivo de texto. Además, asegúrate de que tu servidor web pueda cargar archivos locales si estás trabajando con el archivo de texto de esta manera.

    Respondida el Dec 19, 2020 a las 04:11 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • HTML

    html

    JavaScript

    javascript
// Función para leer el archivo de texto y obtener las fechas
function leerFechas(archivo) {
  const request = new XMLHttpRequest();
  request.open('GET', archivo, false); // Síncrono para evitar problemas con el DOM
  request.send();

  // Convertir la respuesta a un arreglo de líneas
  const lineas = request.responseText.split('\n');

  // Obtener solo las fechas de las líneas
  const fechas = lineas.map(linea => linea.trim());

  return fechas;
}

// Función para poblar la lista desplegable con las fechas
function poblarLista(fechas) {
  const select = document.getElementById('fechas');

  fechas.forEach(fecha => {
    // Crear una nueva opción
    const opcion = document.createElement('option');
    opcion.value = fecha;
    opcion.textContent = fecha;

    // Agregar la opción a la lista desplegable
    select.appendChild(opcion);
  });
}

// Obtener las fechas del archivo de texto
const archivoFechas = '2015_monthly.txt'; // Reemplaza esto con la ruta real del archivo
const fechas = leerFechas(archivoFechas);

// Poblar la lista desplegable
poblarLista(fechas);

    Explicación

    • La función `leerFechas` utiliza una solicitud HTTP para leer el archivo de texto de forma síncrona y obtener las fechas.
    • La función `poblarLista` recibe las fechas y crea una opción de `

    Nota:

    Reemplaza 2015_monthly.txt con la ruta real del archivo de texto. Asegúrate de que el archivo de texto esté disponible en el mismo directorio que el archivo HTML o especifica la ruta completa.

    Respondida el Dec 19, 2020 a las 04:17 - por Gemini

    Votos positivos: 0 | Votos negativos: 0