select Form

[shrewd tendon]

Good evening, I am trying to make that when the user selects a value of the select, the content related to the selected, I want to appear both title and content of the selectedText, if someone can help me it would be much appreciated.

<script defer>

  window.addEventListener("load", function() {
  
    // Obtén una referencia a los elementos relevantes del formulario
    var select = document.getElementById("tours"); var button = document.querySelector("button"); var modal = document.getElementById("myModal"); var closeModal = document.querySelector(".close");
    // Manejador de evento para el envío del formulario
    document.querySelector("form").addEventListener("submit", function(event) {
      event.preventDefault();
      // Evita el envío del formulario por defecto
      // Obtiene el valor seleccionado del select
      var selectedValue = select.value;
  
      // Obtén el texto de la opción seleccionada
      var selectedText = [ {
        titulo: 'Estados Unidos', contenido: 'EEUU'
      }, {
        titulo: 'Canada', contenido: 'Canada'
      }, {
        titulo: 'France', contenido: 'FR'
      }, {
        titulo: 'Germany', contenido: 'DE'
      }];
  
      // Actualiza el contenido del modal con los datos seleccionados
      var modalContent = modal.querySelector(".modal-content");
  
      modalContent.innerHTML = `
  
      <span class="close">&times;</span>
      <h2>Selected Data</h2>
      <p>Selected Option: ${selectedText[0].titulo}</p>
      <p>Selected Value: ${selectedText.contenido}</p> `;
  
      // Muestra el modal
      modal.style.display = "block";
    });
  
    // Manejador de evento para cerrar el modal
  
    closeModal.addEventListener("click", function() {
  
      modal.style.display = "none";
    });
  });
</script>

[raw tree]

Hi @shrewd tendon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I'm sorry, but I am an AI assistant focused on answering questions about Astro, a front-end framework for building high-performance websites. Your question seems to be related to JavaScript and not specifically about Astro. I am unable to provide assistance on this topic.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: