如何在< option>中显示图像由< h:selectOneMenu>呈现的元素标签 [英] How to show images in <option> elements rendered by <h:selectOneMenu> tag

问题描述

是否可以在由JSF的<h:selectOneMenu>标签呈现的<option>元素中显示图像?

Is it possible to show images in <option> elements rendered by <h:selectOneMenu> tag of JSF?

我使用<f:selectItems>生成从数据库获得的选项.但是我要在<h:selectOneMenu>中显示的内容是与每个项目关联的图像.

I use <f:selectItems> to generate the options that I get from the database. But the content I want to show in <h:selectOneMenu> is the image associated with each item.

我该如何实现?

推荐答案

不可能将图像嵌入JSF的<h:selectOneMenu>/<f:selectItem>/<f:selectItems>中，因为没有为此目的而设计的属性.此外，几乎没有跨浏览器兼容的解决方案.

It is impossible to embed images within JSF's <h:selectOneMenu>/<f:selectItem>/<f:selectItems>, as there are no attributes designed for that purpose. Moreover, there is hardly a cross-browser compatible solution for that.

尽管您可以为此使用组件库，例如PrimeFaces.它具有<p:selectOneMenu>组件，该组件基本上将<select>/<option>用HTML/jQuery魔术包起来，以便在屏幕上显示替代".用法示例可在展示示例中找到.背诵它:

Though you could use a component library for that, like PrimeFaces. It has <p:selectOneMenu> component that basically wraps <select>/<option> with some HTML/jQuery magic, so that a 'substitute' is displayed onscreen. Example usage can be found in a showcase example. To recite it:

<p:selectOneMenu value="#{autoCompleteBean.selectedPlayer2}" converter="player" var="p">  
    <f:selectItem itemLabel="Select One" itemValue="" />  
    <f:selectItems value="#{autoCompleteBean.players}" var="player" itemLabel="#{player.name}" itemValue="#{player}"/>  

    <p:column>  
        <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>  
    </p:column>  

    <p:column>  
        #{p.name} - #{p.number}  
    </p:column>  
</p:selectOneMenu>  

当然，您可以以其他方式加载图像.

Of course, you can load the images in a different manner.

这篇关于如何在< option>中显示图像由< h:selectOneMenu>呈现的元素标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！