How can I explode the select box {content}?

[TexFanatico]

Hi all,

as usual, when my poor and old skills aren't enough, I come here hoping to find a nice suggestion/idea that can help me.

 

Situation-target:

Make a nice check box (or select)  with more options to "flag", trough an image, some specific users.

 

Example:

• Supporter
• Contributor
• VIP

 

If a user have a single options, the result is quite fine:

<img src="..../{content}.png" alt="This user is a {content}">

<img src="..../Supporter.png" alt="This user is a Supporter">

 

The problem come when I've more selection active... because the result would become...

<img src="..../Supporter<br>Contributor.png" alt="This user is a Supporter<br>Contributor">

 

 

 

My actual solution is:
 

<script>

    var array = [];
    var res ="";

    var str = "{content}";
    array = str.split("<br>");
    for (var i = 0; i < array.length; i++) {
        var res = res+"<img src='/path/"+array[i]+".png' alt='"+array[i]+"'><br>";
    }
    document.write(res);

</script>

 

But, let's say, I'm not really exited about this solution and I'm pretty sure that it would be possible to obtain the same results into a more elegant and discrete way.

 

Any idea?

 

(my only other solution would be... create a dedicate field for each single selectable option, but I still with the same "inelegant" impression )

 

Thank you for your precious time and help and, as usual, sorry for all my grammatical (and eventually coding) errors