Struts2:如何在select标签中显示每个下拉选项的工具提示？

Question

我有这个struts2 select标签,其中的选项是Item对象的列表.假设Item java bean类具有以下3个属性:itemId, itemLabel, itemDescription.

我的选择标签看起来像这样:

<s:select headerKey="" 
  headerValue="Select Item"
  list="myModel.itemsList"
  listKey="itemId"
  listValue="itemLabel"
  name="selectedItem" />   

我希望每当用户使用该选项时,在下拉菜单中显示每个选项的工具提示.填充该工具提示的文本存储在itemDescription我的java bean类的属性中

我知道你可以为select标签提供一个tooptip,但这不是我需要的,因为每个选项/项目都有不同的描述.

目前我有一个自定义的javascript工具提示,如果可能的话我想使用这个功能.如果项目将列在表格中,我将使用该函数:

<td>
    <span class="tooltip" onmouseout="tooltip.hide();"
      onmouseover="tooltip.show('<s:property value="item.description" />');">
        <s:property value="item.label" />
    </span>
</td>

有没有人知道什么是最好的解决方案,description每当用户将鼠标悬停在选项上时显示为工具提示？

Answer 1

有很多方法可以做你想做的事.对我来说最快的就是编写html:

    <select name="selectedItem">
        <s:iterator value="collectionOfSomething">
            <option value="<s:property value="valueToReturn"/>" title="<s:property value="toolTip"/>">
                <s:property value="itemInListToShow"/>
            </option>
        </s:iterator>
    </select>

以上使用了html5 title属性,关于这一点的好处是你在没有任何javascript的大多数现代浏览器中获得工具提示.

替换:"valueToReturn","toolTip"和"itemInListToShow",其中包含"collectionOfSomething"中值的适当ognl表达式

解决这个问题的另一种方法是使用jQuery(任何JS库都可以),并且会像这样.

1)在页面上放置一个html列表,其中包含工具提示但使用CSS设置样式,因此不可见.

2)使用jQuery(或首选的JS库)将事件上的鼠标绑定到下拉列表中的每个项目,这将显示隐藏列表中相同索引的工具提示.