Streaming live at 10am (PST)

Changing the text in the dropdown trigger with the selected option

Hello,

On my site I want to have a language selection dropdown (EN English, NL Dutch, FR French). It looks like this:

image

All the animations etc are OK, but I’d like the text in the dropdown trigger to reflect the current selection… So if someone selects “FR” for French, the trigger should change to FR. Is there an option I overlooked or do I need to do it via Javascript?

Thanks & cheers --Mike


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

I guess the drop down is part of the navbar symbol - so you should use custom code.

In general this ± the code outline.

If this is your dropdown values:

<div class="dropdown">
  <select>
    <option value="en">en</option>
    <option value="fr">fr</option>
  </select>
</div>
<script>
  /* copy-paste before body inside fr pages */
  $(".dropdown select").val("fr");
</script>

Extra reading: https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value

if/else

More modular/DRY is to create ifrelated to url slug (If url contain fr select fr).

if (window.location.href.indexOf("/fr/") > -1) {
  //  block of code to be executed if condition1 is true
   $(".dropdown select").val("fr");
} else if (window.location.href.indexOf("/en/") > -1) {
  //  block of code to be executed if the condition1 is false and condition2 is true
   $(".dropdown select").val("en");
} 

https://stackoverflow.com/questions/34649131/javascript-how-to-check-if-url-contains-a-word/34649157

But “no way” to give you a specific answer without read-only link.

Thanks @Siton_Systems, that will do nicely. I thought that indeed JS was needed for the job. Your solution is very elegant however, I was going to fiddle with the dropdown itself :slight_smile:

Sorry I didn’t share the site as it should, I just realised I should have done that differently. But I’m OK now.

Thanks again & cheers --Mike