We help IT Professionals succeed at work.

How to change select when pressed on button on different page?

merijn van der leek
I have this site with a navigation bar with a dropdown. On the other site i have a select with two values.
This is the dropdown:
         <button class="dropbtn">Login</button>
                    <div class="dropdown-content">
                        <a class = "teacher" href="login">Teacher Login</a>
                        <a class = "student" href="login">Student Login</a>

Open in new window

And this is the select i am using:
    <form class = "login" action="/login" method="post">
        <div class="form-group">
            <select class="form-control" name="role">
                <option disabled selected value="role">Role</option>
                        <option value="teacher">Teacher</option>
                        <option value="student">Student</option>

Open in new window

So my question is : how can i  make it that if the user clicks on student login the select will stand on value "student" and the other way around?
The select is on a different page then the login dropdown so that makes it hard for me.
Watch Question

Most Valuable Expert 2017
Distinguished Expert 2019
You need to pass the selection in the URL and then in  the receiving page look for that option and select the relevant option in the select on the target page

On the sending page
<a class = "teacher" href="login?option=teacher">Teacher Login</a>
<a class = "student" href="login?option=student">Student Login</a>

Open in new window

On the receiving page (give your <select> an id so you can find it - for example selectRole
window.addEventListener('load', function() {
  var role = window.location.search.split('=')[1].split(',');  
  if (role) {
    document.getElementById('selectRole').value = role;

Open in new window

Working sample here


Thanks so much great solution!!
Most Valuable Expert 2017
Distinguished Expert 2019


You are welcome.