Image in select(tag) option name

[Risto]

As an example, is there a way to add an image in front of a user's name in a dropdown using either select() or selecttag()?

The select functions take a textfield value.

#select(objectName="book", property="authorId", options=authors, textField="authorName")#

I would love to be able to do something that renders the dropdown like this:

<option value="1"><img src="/images/avatar/1.png" width="20" height="20"></option>

Thanks

[Risto]

Sorry, I meant like this

<option value="1"><img src="/images/avatar/1.png" width="20" height="20"> Jim Smith</option>

[Andy Bellenie]

You can use an array to populate the options argument. Construct the array with the values you want before passing it in. 

On 15 December 2013 14:51, Risto <ck.web...@gmail.com> wrote:

Sorry, I meant like this

<option value="1"><img src="/images/avatar/1.png" width="20" height="20"> Jim Smith</option>

--
You received this message because you are subscribed to the Google Groups "ColdFusion on Wheels" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cfwheels+u...@googlegroups.com.
To post to this group, send email to cfwh...@googlegroups.com.
Visit this group at http://groups.google.com/group/cfwheels.
For more options, visit https://groups.google.com/groups/opt_out.

[Risto]

Thanks Andy. Since my post I think I will just be using this instead. Seems pretty nice.

http://designwithpc.com/Plugins/ddSlick#demo

[Risto]

Apparently doing
<option value="1"style="background-image:url(images/avatars/1.png);">Jim Smith</option> does not work in IE, so at least for rendering  images in the dropdown it's javascript/jquery anyways.

If anyone knows of a way of rendering images in a dropdown without javascript that works across the main browsers (including IE) i would be interested.

Thanks again.

[Chris Peters]

In HTML, <option> tags only display text, not images. You need JavaScript hackery if you want images in your selection form control.

I would recommend the approach that ddSlick is doing: set data-description and data-imagesrc attributes on your <option> tags and use ddSlick or your own JavaScript solution.