Changing Default Dropdown Text in Webflow

Hey everyone,

I have a little concern. If I have dropdowns and each dropdown is a link to a page, and I have the same dropdown on each page these links redirect to, is it possible to change the default dropdown text to the current selection when I click on a link in the dropdown and it redirects to the page? I’m not sure if this is natively doable on Webflow without any custom code and I’ve been looking for a way to implement this. Check out the dropdown elements inside the filters-wrapper class to understand better.

Read-Only
Hosted Link

Thanks!

Hey guys,

I’d still love to know if this is natively doable on Webflow.

Thank you!

That’s an unusual way to navigate, it looks like a filter setup.

No, you’d need custom code to change the displayed text, but the way you’ve set it up only one of the for selectors can have a selection at any given time.

JS setup would be;

  • Scan all 4 collection lists to find any which have the w--current class applied by Webflow.
  • If there are, then you’re on that page. Take that text, set the displayed text for the dropdown’s title, and maybe restyle it so it’s noticeable.
1 Like

Hey @memetican,

Thanks a lot! Thats what I thought too. Custom code would certainly be needed to change the displayed text. I only needed to make sure I’m not missing anything.

Thanks again!

hi @SiteGrow I agree with @memetican that it is unusual approach and it will be for clients confusing navigation. IMO “dropdown” element is not right choice, what you are asking (display current selected choice ) is build-in in “Select” element.

Anyway WF pre-build “select” element is missing core functionality like set option as disabled. Look on code below what I mean.

You will be better to use custom code because as was mentioned this is a “filter” sending requests to update content dynamically on change or have button that will update data on submit etc. etc.

Principle example:

<form>
    <select id="cars">
      <option selected disabled>Choose one</option>
      <option value="saab">Saab</option>
      <option value="vw">VW</option>
      <option value="audi">Audi</option>
    </select>
</form> 

Redirect on change:

HTML

<section>
  
  <h1>Pure CSS Dropdown select</h1>

  <select id="mySelect" onchange="getOption(value)">
    <option value="https://discourse.webflow.com/t/dropdown-with-links-visible-after-clicking-in-the-input-field/270763">WFF 1</option>
    <option  value="https://discourse.webflow.com/t/weird-gap-in-the-image-slider/270737/4">WFF 2</option>
  </select>

</section>

JS

let newHref = ""

// set first link to `newHref` on page load 
window.onload = function() {
    const select = document.getElementById("mySelect");
    newHref = select.value;
  }

// than any new `newHref` is set on select change
function getOption(v){
  newHref = v 
  redirect(newHref)
}

you can also use radio buttons like this:

Your choice :man_shrugging:

1 Like

Hey @Stan,

I understand your point, thanks for the advise!

1 Like