Loop select options in Liquid

Question

Hi,
I have a <select> form field that saves it values into a webapp that customers can edit using edit webapp functionality. Nothing unusual here
A static solution works fine, if I save the webapp and return to the page the right values get selected.
<select name="CAT_Custom_12" id="CAT_Custom_12" multiple>
     <option value="1">Foo</option>
     <option value="2">Bar</option>
</select>
What I want to archive is a dynamic solution, I want the options to be rendered with a for loop in Liquid.
<select name="CAT_Custom_12" id="CAT_Custom_12" multiple>
  {% for item in users.items %}
    <option value="{{ item.customer.id }}">{{ item.customer.firstName }} </option>
  {% endfor %}
</select>
This doesn't work. The field stores the correct values in BC, 1,2 and so on.. The page also render the same option values, but they don't get selected...
Is the problem related to DOM? Are my options rendering after the select already tried to select the equivalent select?

Answer 1

First of all, thank you for pointing me into the right direction that made it possible for me to solve this. Your code showed the logic about how to think.
For further reference, i'm not 100% sure about how your code was supposed to work. As the data is stored in a comma separated string I had to split it before I could loop in it, like so:
<select name="CAT_Custom_12" id="CAT_Custom_12" multiple="multiple">
  {% for user in users.items -%}
    {% assign found = false %}
    {% assign allowedAccess = CAT_Custom_12 | split: ',' %}
    {% for item in allowedAccess -%}
      {% if item == user.customer.id -%}
        <option value="{{ user.customer.id }}" selected>{{ user.customer.firstName }} </option>
        {% assign found = true %}
      {% endif -%}
    {% endfor -%}
    {% if found == false %}
      <option value="{{ user.customer.id }}">{{ user.customer.firstName }} </option>
    {% endif %}
  {% endfor -%}
</select>
I'm however very keen to know if this can be made even easier as i'm going to look for data in loops for almost every project. It's also very interesting what Liam speaks about in another thread, that modules can't take search parameter, instead we have to make this kind of search logic. When webapps enters module_data I will never user the modules anymore. Always limited by 500 in search operation and never able to filter for the exact data I need. That is however another story. Thank you Abhishek and Liam. I hope that someone else will learn by this thread. It could be refactored into a general guide, very handy to be able to search data with another field as search-source.