Changing Default Dropdown Text in Webflow

Design help Animations & Interactions
5

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