html - rich:select on drop down 跳转到列表中当前选中的项目

Question

我们正在使用rich:select我们的下拉输入。

<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>

我们的问题是，当下拉菜单被触发时，它总是从列表中的第一个元素开始。但是，我们希望它跳转到当前选定项目的位置。

Answer 1

通过传统方式不可能，但这应该有效：

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

…</p>

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); 

Answer 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" />            

创建一个<h:inputHidden/>并将其 id（selectedId在本例中）添加到"render="ajax，然后<h:inputHidden/>在新选择的情况下更新值。

现在您可以在javascript中获取<h:inputHidden/>（的选定值）的值：</rich:select>

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