How to know which option was selected by Console.log? And I would like to know if I could create something like:
If Mrs was selected, the button takes you to a link,
if Proof was selected, the button takes you to another link.
Everything using 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 a click event listener on your button element.
When the user clicks the here element then you run the callback function that will get the myselect elements .value by querying the elements id attribute. Use a switch statement to set the value for the link, then do something with the link info or set other variables, etc...
EDIT: As for the link part of your question, if you are referring to linking to another page rather than to a section of the same page, then you can use
window.location. Maybe you have a page called doctors and when they select Dr, then you redirect them to that doctors page, then you can use the switch to define the page, then concatenate that value on the end of your url address, either using window.location.host or by statically adding your url in a 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>If you put the URLs into the value attributes of the selectable options you can do it in a significantly shorter way:
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>