造型h：selectOneListbox

Question

我有一個與造型h:selectOneListbox問題，並將非常感謝一些建議。

在一個bean中，我有一個循環，其中值和標籤從文件中讀入並使用h:selectOneListbox顯示。大多數條目顯示正常，可以選擇，但有幾個顯示，但被禁用。下面是bean中代碼的一個片段，其中的條目被初始化，並且標記被設置爲指定給定條目是否被禁用。

// private method for initialization 

// Initialization code 

SelectItem item = new SelectItem(); 
for (i=0; i<numEls[set]; i++) { 
    item = null; 
    if (itemLabels[set][i].contains(disabledLabel)) 
     item = new SelectItem(itemValues[set][i], itemLabels[set][i], "", true); // Disabled 
    else 
     item = new SelectItem(itemValues[set][i], itemLabels[set][i]);   // Enabled 
    if (set == 0) 
     items0[i] = item; 
    else 
     items1[i] = item; 

    // Rest of the initialization code 

} 

public String getElement0() { 
    return element[0]; 
} 

public void setElement0(String element) { 
    this.element[0] = element; 
} 

// Other getters and setters, including for element[1] etc. 

這正常工作和相應的XHTML代碼的部分是：

<h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}" 
        enabledClass="itemEnabled" disabledClass="itemDisabled"> 
    <f:selectItems value="#{abundance.items0}"/> 
</h:selectOneListbox> 

，並在CSS文件中的兩條線以下：

.itemEnabled {font-family:monospace;} 
.itemDisabled {font-family:monospace;} 

使用Firefox瀏覽器的項目被格式化正確地，殘疾人物品也被格式化，但變灰。出於某種原因，即使樣式itemDisabled與itemEnabled完全相同，它仍然呈灰色。如果itemDisabled被省略，它仍然是灰色的，但不是等寬的，這是可以預料的。

但是，使用Internet Explorer或Chrome的文本不是等寬的，既不是啓用或禁用的文本。我如何解決這個問題？另外，我注意到h:selectOneListbox的屬性也包含了styleClass，但是它如何適應enabledClass和disabledClass？

有人可以幫助我這樣做，使輸出正確使用所有主流瀏覽器樣式？

---

好吧，非常感謝，我剛開始使用PrimeFaces。

但是，我確實有與此相關的另一個問題。我試圖用一系列有效輸入值來使用f：validateDoubleRange，如果輸入超出指定範圍，則使用h：message產生錯誤消息。問題是，當我這樣做的時候，當我點擊一個按鈕來更新菜單中的內容時，一個動作不會被觸發。

這裏是我的XHTML代碼更完整列表：

<h:selectOneMenu id="abundanceSet0" value="#{abundance.abunSet0}" style="height:25px; width:180px;"> 
    <f:selectItems value="#{abundance.abunSetMap}"/> 
</h:selectOneMenu> 
<p:spacer width="37" height="0"/> 
<p:commandButton value="Select Set" actionListener="#{abundance.selectSet0}" update="abundances0"/> 
<br/><br/> 
<h:outputText value="Specify the abundances of individual elements:"/> 
<h:panelGrid columns="3" cellpadding="2"> 
    <h:selectOneListbox id="abundances0" size="10" style="width:15em" value="#{abundance.element0}" 
          enabledClass="itemEnabled" disabledClass="itemDisabled"> 
    <f:selectItems value="#{abundance.items0}"/> 
    </h:selectOneListbox> 
    <h:panelGrid style="text-align:center;"> 
    <p:commandButton type="button" value="Readme" onclick="openPopup(600,500,'htmlPopup/expAbundances')" styleClass="longButton"/> 
    <h:inputText id="update0" size="4" value="#{abundance.updateAbun0}"/> 
    <p:commandButton value="Update Abundance" actionListener="#{abundance.update0}" 
        styleClass="longButton" update="abundances0"> 
     <f:validateDoubleRange minimum="-9.99" maximum="12.00"/> 
    </h:panelGrid> 

    <ui:include src="abunExplain.xhtml"/> 

</h:panelGrid> 

的行動abundance.selectSet0和abundance.update0，以及其他，都沒有被解僱。這裏的文件包含在顯示整個頁面的主文件中，甚至在該文件中驗證條目也可以防止操作發揮作用。順便提一句，你可以忽略「abunExplain.xhtml」，它只是向視圖添加一些靜態文本。

目前我正在使用我的bean中的一些方法來攔截輸入值，並確保它們是範圍內的有效數字。

如果您或其他人對此有所瞭解，我將非常感激。

Answer 1

這是一個HTML特定問題，而不是JSF特定問題。由<f:selectItem(s)>在<h:selectOneListbox>中生成的HTML <option>元素本身已經非常有限的CSS樣式選項。只有字體顏色可以跨瀏覽器更改，而其他任何內容都依賴於瀏覽器。

最好的辦法是使用JavaScript將<select><option>變成<ul><li>，這正是大多數JSF組件庫像PrimeFaces所做的那樣，其中<p:selectOneListbox>。 <ul><li>允許完整的CSS樣式自由。你甚至可以爲這個—使用一些獨立的jQuery（UI）插件，但是爲什麼重新發明輪子，例如PrimeFaces已經在做這個。