rich:select on drop down jump to the currently selected item in list

问题

We are using rich:select for our drop down inputs.

<rich:select id="select" value="#{controller.attrs.value}" >
       <f:selectItems value="#{controller.attrs.items}" var="foo"
            itemValue="#{foo}" itemLabel="#{foo.bar}" />
       <f:ajax event="#{ajaxActionController.action}" render="input" />            
</rich:select>

Our problem is that when the drop down is triggered it always starts with the first element in the list. However we would like it to jump to the position of the currently selected item.

回答1:

Not possible through conventional means, but this should work:

<rich:select id="select" onlistshow="L.scrollList()" onlistclick="L.saveId()">

…

L = window.L || {};

(function() {        
    id = 0;    

    L.saveId = function() {
        id = #{ rich:component('select') }.list.index;
    };

    L.scrollList = function() {
        var list = #{ rich:component('select') }.list,
            listDiv = $( #{ rich:component('select') }.popupList.popup ).find(".rf-sel-lst-scrl"),
            selectedDivPos = $(list.items[id]).position();  

            listDiv.scrollTop(selectedDivPos.top - 7);
    };  

})(L);

回答2:

<h:inputHidden id="selectedId" value="#{controller.attrs.value}"/>
<rich:select id="select" value="#{controller.attrs.value}" >
   <f:selectItems value="#{controller.attrs.items}" var="foo"
        itemValue="#{foo}" itemLabel="#{foo.bar}" />
   <f:ajax event="#{ajaxActionController.action}" render="selectedId input" />

Make an <h:inputHidden/> and add its id (selectedId in this example ) to "render=" of ajax, then <h:inputHidden/> value will be updated in case of a new selection.

Now you can get the value of <h:inputHidden/> (the selected value of </rich:select> ) in javascript:

var selectedValue = document.getElementById('selectedId').value;

来源：https://stackoverflow.com/questions/17718796/richselect-on-drop-down-jump-to-the-currently-selected-item-in-list

标签

html

jsf

richfaces