<main> <div class="container"> <select name="semester" id="select-semester"> <option value="no-semester">select semester</option> <option value="semester 1">semester 1</option> <option value="semester 2">semester 2</option> <option value="semester 2">semester 3</option> </select> </div> </main>como si tuviera el semestre 1, el semestre 2, el semestre 3 como opción, así que quiero que si alguien selecciona el semestre 1, se mueva a la página del semestre 1
Me suscribiría al evento de change de la selección y luego, según el valor seleccionado, redirigiría a la página adecuada
algo como esto:
<main> <div class="container"> <select name="semester" id="select-semester"> <option value="">select semester</option> <option value="1">semester 1</option> <option value="2">semester 2</option> <option value="3">semester 3</option> </select> </div> </main> document .getElementById('select-semester') .addEventListener('change', function (this: HTMLSelectElement) { var semesterId = this.value; if (semesterId) { window.location.href = '/semester-' + semesterId; } });¡Hice un ejemplo aquí para ti! Coloqué un enlace debajo de la selección. El evento de cambio de valor reemplaza el atributo href de la etiqueta.
let semester = document.querySelector("#select-semester"); let go = document.querySelector("#go"); semester.addEventListener("change", (e)=> { go.href = go.dataset.baselink + semester.value; go.innerHTML = "GO to " + semester.value } ); #go { padding: 5px; border-radius: 5px; background-color: gray; text-decoration: none; color: black; text-align: center; } <div class="container"> <select name="semester" id="select-semester"> <option value="no-semester">select semester</option> <option value="semester 1">semester 1</option> <option value="semester 2">semester 2</option> <option value="semester 2">semester 3</option> </select> <a id="go" href="#" data-baselink="https://www.somelink.do/">GO</a> </div>