Dropdown field value getting outputted multiple times

Question

I have a dropdown field that has three options. In my template, I want to do one thing if option 1 is selected and do something else if option 2 is selected.

Here is what my code looks like:

{% for option in entry.transparentMenu.options %}
    {% if entry.transparentMenu.value == "menuLight" %}
        <h3>white</h3>
    {% elseif entry.transparentMenu.value == "menuDark" %}
        <h3>black</h3>
    {% endif %}
{% endfor %}

The code seems to work but the output is: black black black; I only want black to display once.

What am I doing wrong?

Answer 1

You don't need the for loop in this case. What's happening is you're looping over each option in your dropdown field, and each time it's checking the value of the dropdown and displaying white or black. Since you have three options, you're going to get the dropdown value displayed three times (which is why you're seeing black black black).

All you need is just the if conditional:

{% if entry.transparentMenu.value == "menuLight" %}
    <h3>white</h3>
{% elseif entry.transparentMenu.value == "menuDark" %}
    <h3>black</h3>
{% endif %}

Also, fwiw looks like you have a typo in your code 👆️ - you use entry.transparentMenu twice and entry.header.transparentMenu once. I'm guessing you want entry.transparentMenu everywhere...

The only time you'd want to use the for loop to get all the dropdown field's options is if you wanted to display those in the template (in a list for example or to create your own dropdown on the frontend):

<ul>
    {% for option in entry.dropdownFieldHandle.options %}
        <li>{{ option }}</li>
    {% endfor %}
</ul>

But in your case, you just want the current value and not all the options, so just remove the for loop.

Answer 2

I don't know your structure, but if transparentMenu is a select or checkbox or something with menuLight and menuDark as options, it should be:

{% for option in entry.transparentMenu.options %} {% if entry.header.transparentMenu.value == "menuLight" %} <h3>white</h3> {% elseif entry.header.transparentMenu.value == "menuDark" %} <h3>black</h3> {% endif %} {% endfor %}

instead of:

{% for option in entry.transparentMenu.options %} {% if entry.transparentMenu.value == "menuLight" %} <h3>white</h3> {% elseif entry.header.transparentMenu.value == "menuDark" %} <h3>black</h3> {% endif %} {% endfor %}

right?