<f:selectItems> JSF标记自定义工具提示属性

Question

是否可以在JSF中为标记添加“title”属性，例如：

<f:selectItems value="#{foo.fooList}" title="{foo.fooDescription}"/>

生成的HTML：

<select>
    <option value="foo1" title="description1">foo ex1</option>
    <option value="foo2" title="description2">foo ex2</option>
</select>

Answer 1

我没有一个优雅的解决方案，但它可以做到。 我假设JSF 2+和Facelets VDL。

对于托管bean Foo ：

@ManagedBean @RequestScoped
public class Foo {
  private List<SelectItem> fooList = Arrays.asList(
            new SelectItem("value1", "label1", "description1"),
            new SelectItem("value2", "label2", "description2"));

  public List<SelectItem> getFooList() {
    return fooList;
  }
}

您可以使用JavaScript在DOM节点上设置title属性：

<h:selectOneMenu binding="#{requestScope.fooSelectOne}">
  <f:selectItems value="#{foo.fooList}" />
</h:selectOneMenu>
<script>
(function() {
  var selectName = '#{requestScope.fooSelectOne.clientId}';
  var kids = document.getElementsByName(selectName)[0]
                     .getElementsByTagName("option");
  var index = 0;
  <ui:repeat value="#{foo.fooList}" var="_opt">
  kids[index++].title = '#{_opt.description}'; //TODO: escape this
  </ui:repeat>
}());
</script>

Answer 2

假设您的<h:selectOneMenu如下所示。

<h:form id="myForm">
  <h:selectOneMenu id="myCombo">
    <f:selectItems value="#{foo.fooList}"/>
  </h:selectOneMenu>
</h:form>

现在在window.onload您可以遍历option并添加title ，如下所示

<script>
    window.onload = function() {
         var options = document.getElementById("myForm:myCombo").options;
         for(var i = 0; i &lt; options.length; i++) {
             options[i].title = "description" + i;
         }
    }
</script>

Answer 3

itemDescription属性不会出现在seam 2.2中。

最佳解决方案是使用javascript显示每个选择项的工具提示。

  <script type="text\\javascript"> function getTooltip(id){ var options = document.getElementById(id).options; for(var i = 0; i &lt; options.length; i++) { options[i].title = "description" + i; } } </script> 

如果你的id是动态或其他方式生成的，例如。

 <rich:dataTable value="#{mybean.list}">
   <h:selectOneMenu value="#{mybean.selectedValue}" onmouseover=getTooltip(this.id)>
     <f:selectitems value="#{mybean.selectlist}">
   </h:selectOneMenu>
 </rich:datatable>

该解决方案适用于所有动态生成的id以及简单的id

Answer 4

要在生成的options上生成title属性，您只需使用如下的passthrough属性：

<f:selectItems value="#{values}" p:title="Your title here"/>

Answer 5

我认为对于f:selectItems标签没有这样的（ title ）属性可用。 您在HTML中的普通option标记中具有此属性，但在jsf没有。 我认为您应该使用普通的select标记而不是selectOneMenu来获取title值。