Smart-Select show HTML-elements instead of strings

In a SmartSelect you can specify the shown values as strings, using the data-display-as alias:

:data-display-as="itemname"

I’d like to display another element instead of a string (e.g. an icon):

:data-display-as="<img src='myimage.png' />"
  • If I return <img src='myimage.png' />, F7 wraps the <img ...> element as string,
  • if I use a function, e.g.: :data-display-as="getSomething()", where I return an empty string, F7 falls back to the default value.
  • If I append an HTML-element to item-after, it gets overwritten by the value strings.
  • if I add another value element to the smart-select valueEl: '.testvalueel', item-after is not created.

Anything I’m missing?

If that isn’t possible, could we make that into an FR?

Smart select inserts value text as text ignoring HTML, as it potentially can cause XSS.
In latest commit on github i’ve added new setValueText ss parameter that when passed as false won’t set and update value passed in valueEl, so you can just use your own content in item-after based on selected values

2 Likes