¿Cómo saber qué opción seleccionó Console.log? Y me gustaría saber si podría crear algo como:
Si se seleccionó Sra., el botón lo lleva a un enlace,
si se seleccionó Prueba, el botón lo lleva a otro enlace.
Todo usando JavaScript.
<html> <select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select> <button> Here </button> </html>Use un detector de eventos de click en su elemento de botón. Cuando el usuario hace clic en el elemento aquí , ejecuta la función de devolución de llamada que obtendrá el valor de los elementos .value al consultar el atributo de identificación de los elementos. Use una declaración de cambio para establecer el valor del enlace, luego haga algo con la información del enlace o configure otras variables, etc.
EDITAR: en cuanto a la parte del enlace de su pregunta, si se refiere a vincular a otra página en lugar de a una sección de la misma página, entonces puede usar window . location . Tal vez tenga una página llamada doctores y cuando seleccionan Dr , entonces los redirige a esa página de doctores, luego puede usar el interruptor para definir la página, luego concatenar ese valor al final de su dirección URL, ya sea usando window.location.host o agregando estáticamente su url en una variable.
let here = document.querySelector('button'); let myselect = document.querySelector('#myselect'); let sel = document.querySelectorAll('.sel'); function getValue() { let link = ''; let id = ''; // set links value in the switch using the selected value // in each case define variables for use outside of switch switch (myselect.value) { case '1': link = '/men'; id= 'mr'; break; case '2': link = '/marriedwomen'; id= 'mrs'; break; case '3': link = '/unmarriedwomen'; id= 'ms'; break; case '4': link = '/doctors'; id= 'dr'; break; case '5': link = '/professors'; id= 'prof'; break; } // if your redirecting to another page... let page = `${window.location.host}${link}`; // or let page = `https://mywebsite.com/mypagedirectory${link}`; console.log(page) // an example of how you could use the value on the same page to a section // reset each hidden elements display to none sel.forEach(s => !s.classList.contains('none') ? s.classList.add('none') : null); // reveal the element with the selected values set id variable document.getElementById(id).classList.remove('none'); } here.addEventListener('click', getValue); .none { display: none; } <html> <select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select> <button> Here </button> <p class="none sel" id="mr">This is the Mr section</p> <p class="none sel" id="mrs">This is the Mrs section</p> <p class="none sel" id="ms">This is the Ms section</p> <p class="none sel" id="dr">This is the Dr section</p> <p class="none sel" id="prof">This is the Prof section</p> </html>Si coloca las URL en los atributos de valor de las opciones seleccionables, puede hacerlo de una manera significativamente más corta:
document.getElementById("myselect").addEventListener('change',function(){ if (this.value&&confirm(`Do you really want to go to "${this.children[this.selectedIndex].textContent}"?`)) location.href="https://"+this.value; }); <html> <select id="myselect"> <option value="">please select</option> <option value="takeMeToMr.com">Mr</option> <option value="myChoiceIsMrs.com">Mrs</option> <option value="andMineIsMs.com">Ms</option> <option value="thisIsForDr.edu">Dr</option> <option value="google.com">Prof</option> </select> </html>