Conditional if statement for Matrix dropdown option

Question

Ok, so I've tidied up the code a bit and using option.selected instead of option to see if the option is selected. But, it isn't behaving how I'd expect it:

{% for telephone in user.profilePhone.type('details') %}
    <li>
      {% if telephone.type == 'details' %}
        {% for option in telephone.icon.options %}
            {% if option.selected == 'mobile' %}
                <i class="fa fa-fw fa-mobile"></i>
            {% elseif option.selected == 'home' %}
                <i class="fa fa-fw fa-home"></i>
            {% else %}
                <i class="fa fa-fw fa-phone"></i>
            {% endif %}
        {% endfor %}
        {% if telephone.country %}{{ telephone.country }}{% endif %}
        {{ telephone.number }}
      {% endif %}
    </li>
{% endfor %}

So this is how I read it:

1. Loop through all Block Types details
   • As I understood from the docs, there is no need to be specific if there's only one Block Type (regardless of max blocks setting). The extra if conditional seems redundant?
   • I also understood that a for loop would act as a conditional anyway, so it would return false if no Blocks existed?
2. Loop through the icon dropdown options
   • Whichever one is selected, display it's corresponding icon.

But what it actually outputs is this:

So it's outputting all of the available options, not just the selected one (and not even the correct icons). I've managed (with separate if statements for just 'home' and 'mobile' to get this:

But it's still outputting all options declared in the if statement, instead of the desired single icon. Here are the dropdown options:

I'm new to programming, so perhaps I'm getting muddled up with things, but it seems like it should only output the icon I want, not the entire dropdown list (I realise I may need another conditional for if 'other' or 'work' is selected)

Perhaps the issue is you can't check in the for loop for just the selected option with an if condition. Something like:

{% for option in telephone.icon.options if option.selected %}

Answer 1

If I understand things correctly, you have a matrix block telephone, which contains a dropdown field telephone.icon, and you want the value of the selected dropdown option. That value is telephone.icon.value (which will be one of mobile, home, work, or other).

{% for telephone in user.profilePhone %}
  <li>
    {% if telephone.icon.value == 'mobile' %}
      <i class="fa fa-fw fa-mobile"></i>
    {% elseif telephone.icon.value == 'home' %}
      <i class="fa fa-fw fa-home"></i>
    {% else %}
      <i class="fa fa-fw fa-phone"></i>
    {% endif %}

    {% if telephone.country %}{{ telephone.country }}{% endif %}
    {{ telephone.number }}
  </li>
{% endfor %}