How to dynamically select a default option in a select box

In this tutorial, I will show you how to dynamically select an option.

To do this, I will give you an example where we redirect to another page (let's say the contact page) with the correct option selected in a form. So that the option you want is dynamically selected based on an anchor point in the URL.

Last week, I was working on a client site and they offer 3 services. Once the user clicks on a service, the page should take you to the contact page with the correct service option selected.

For example, there is service1, service2, and service3. If the user clicks "service3", the contact page should appear with "Service 3" selected. This is a better user experience than just redirecting them to the contact page and having them select "Service 3" again.

Let me show you how I did this.

In this example, we have a "Services" page with 3 services, each with a button. The buttons take you to /contact#service1, /contact#service2, and finally /contact#service3. You want to dynamically set the correct option in your form based on the URL.

In your Javascript, check if the page is the "contact" page and if so, check if there is an "anchor point" (the '#services' part). Getting the "anchor point" is as simple as this window.location.hash. Getting the anchor point without the hashtag is as simple as window.location.hash.substring(1).

Also, get the "select" options from the form via the id. This is in order to set the default "option" on it.

We will also have a switch case using the text from the anchor point to execute a function to dynamically select the correct option by default.

The first part of the code looks like this

if (window.location.pathname === "/contact") {

    //Get the select box from the form
    var selectService = document.getElementById("service-options");

    // Get the anchor point text
    var option = window.location.hash.substring(1);

    switch (option) {
      case "service1": // /contact#service1
        setSelected(option, selectService);
        break;
      case "service2": // /contact#service2
        setSelected(option, selectService);
        break;
      case "service3": // /contact#service3
        setSelected(option, selectService);
        break;
      default: // /contact
        setSelected(option, selectService);
    }
  }

The setSelected function sets the correct "option" dynamically. It goes through all the values from the options in the form and checks if the value is equal to the option we passed in (the text from the anchor point), if so it will select that option as the default one. This function looks like this:

  function setSelected(option, selectService) {
    for (var i, j = 0; (i = selectService.options[j]); j++) {
      if (i.value == option) {
        selectService.selectedIndex = j;
        break;
      }
    }
  }

That's it. The above function is how to select a default option in a select part of the form dynamically. So if you have 2 pages and want the correct option to be selected when you send the user to the other page you know how to do it.