Pre-Selected Dropdown Item Based on URL Parameter

Hi Everyone!

I have a request from a client that I am not sure how to tackle yet, so I am reaching out to the community. I do not have a read-only/share link yet as I am trying to plan how to accomplish what the client wants first.

I will be running ads to the website, and the ads will be broken down into ad sets for certain categories (coffee, fitness, sports for example). Each ad set will have a specific UTM that brings them to the page. For example, a coffee ad might look like this: Website Hosting - Mysite.com

The client wants a dropdown menu in the hero section that is preselected based off the ad that brought them there. For example, a coffee ad might have brought them to the site, so coffee would be the selected item in the dropdown when they land on the page and see the hero.

I have been searching around stackoverflow and this community for an answer I can understand, but I have not been successful yet. I am not well-versed in javascript, but I can follow precise instructions.

Looking to the community for help and ideas. Thank you all!

Tagging @samliew because he always gives great answers!

Googling your question’s title Pre-Selected Dropdown Item Based on URL Parameter - Google Search

Provides these answers, could you try something first? Thanks

html - Drop Down menu option selected based on URL paramater - Stack Overflow
javascript - Dropdown selected with URL parameter - Stack Overflow
Dropdown selected based on URL parameter - PHP or jQuery? - Stack Overflow
javascript - Pass parameter via URL to pre-select drop down value on linked page - Stack Overflow
javascript - Grab URL parmeter and set select option - Stack Overflow
javascript - Dynamically set the value of select dropdown using query string paramater - Stack Overflow
jquery - Set option 'selected' if url query string matches - Stack Overflow

Or perhaps something from this forum Auto-fill form values based on URL querystring

Thanks you, @samliew. I did see your Webflow post and some of these Stackoverflow articles. I was not able to get any of them to work, mainly because I don’t know javascript. I will spend today trying harder and perhaps I will get it working with more time! If not, I will come back here haha.

I ended up switching my design from a dropdown menu to a tab system. However, I did figure out how to use a URL parameter to open a specific tab. For example, when someone clicks an advertisement for “coffee” then my coffee tab would be pre-opened on the page.

I placed this code in my body section of the site’s custom code (under project settings). For a tab system, you do not need to change this code whatsoever.

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;

$('.' + tabName).triggerHandler('click');

function getParam(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
  return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
});
</script>

In order to specify the tab you want opened by a URL, you have to give your tab links a specific class. For example, my tab links might have classes of “coffee-tab” or “fitness-tab”.

Once you have given the tabs a class, all you have to do is type out the correct URL. For example:

myurl.com/?tab=coffee-tab (this links to my coffee tab)
myurl.com/?tab=fitness-tab (this links to my fitness tab)

All you have to do for the URL is replace “coffee-tab” with the class name you gave to that tab link on your site.

If you want to see this in action, check these links:

http://2beacon.webflow.io/?tab=taxi-tab (goes to my taxi tab)
http://2beacon.webflow.io/?tab=coffee-tab (goes to my coffee tab)
http://2beacon.webflow.io/?tab=fitness-tab (goes to my fitness tab)

@samliew feel free to close this topic, thanks!