JSPX падащ списък

Помислете дали да не използвате друг тип компонент вместо падащо меню. Например какво ще кажете просто да използвате итератор за показване на списъка с опции?

Няма програмен (което означава javascript) начин за задействане на разкриването на естествен падащ елемент. Както съветват други, обмислете използването на различна стратегия за потребителския интерфейс. Може би af: таблица, която може да се избира?

вярно е, че няма директен или програмен начин за емулиране на задействане на събитие за щракване върху падащо меню, за да го отворите, но можете да направите това чрез следния код. Това, от което се нуждаете са:

1. jquery-1.7.1.min.js
2. ExpandSelect.js

Бийнът, който предоставя списъка на SelectItem, е:

import java.util.ArrayList;
import java.util.List;

import javax.faces.model.SelectItem;

public class BackBean {
    private List<SelectItem> options;

    public BackBean() {
        options = new ArrayList<SelectItem>(0);
        options.add(new SelectItem("Option 1", "Option 1"));
        options.add(new SelectItem("Option 2", "Option 2"));
        options.add(new SelectItem("Option 3", "Option 3"));
        options.add(new SelectItem("Option 4", "Option 4"));
        options.add(new SelectItem("Option 5", "Option 5"));
    }

    public void setOptions(List<SelectItem> options) {
        this.options = options;
    }

    public List<SelectItem> getOptions() {
        return options;
    }
}

А jspx страницата е:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="Home" id="d1">
            <af:form id="f1">
                <af:resource type="javascript" source="/js/jquery-1.7.1.min.js"/>
                <af:resource type="javascript" source="/js/ExpandSelect.js"/>
                <af:panelStretchLayout id="psl1">
                    <f:facet name="center">
                        <af:selectOneChoice label="Menu" id="soc1" clientComponent="true" styleClass="menu">
                            <f:selectItems value="#{backingBeanScope.backBean.options}" id="si1"/>
                        </af:selectOneChoice>
                    </f:facet>
                </af:panelStretchLayout>
            </af:form>            
            <af:resource type="javascript">
                $(document).ready(function(){                    
                    ExpandSelect(document.getElementById($($('.menu > tbody > tr > td').next().find('select')).attr('id')));
                });
            </af:resource>            
        </af:document>
    </f:view>
</jsp:root>

Ето екранната снимка, която имам:

Надявам се това да помогне. Кажете ми вашите отзиви.