多重选择在ui：repeat内部不起作用

Question

我正在尝试为ui：repeat中的每个条目实现多选框。 我尝试在document.ready和ui：repeat内部初始化它。 它仅应用于第一行的顶部。

    <ui:repeat id="repeat" value="#{bean.list}" var="item" varStatus="status"><h:form id="supervisorCircleForm">
                                                                    <p:dataTable id="supervisor_table" var="pass"
                                                                                 value="#{bean.insideList}">
                                                                        <p:column headerText="Name" styleClass="center">
                                                                            <h:outputText value="#{pass.memberName}"/>
                                                                        </p:column>
                                                                        <p:column headerText="Companies"
                                                                                  styleClass="center">
                                                                            <select id="taxiCircle" multiple="multiple">
                                                                                <c:forEach var="item"
                                                                                           items="${bean.companyList}">
                                                                                    <option value="${item.value}">${item.label}</option>
                                                                                </c:forEach>
                                                                            </select>
<script type="text/javascript">
                                                                                            (function(){
                                                                                                $('#taxiCircle').multiselect();
                                                                                                console.log("Func Called");
                                                                                            })();
                                                                                        </script>                                                                        </p:column>
                                                                    </p:dataTable>
                                                                </h:form>
</ui:repeat>

每次都会调用初始化部分，但选择框仅出现一次。 我也尝试在document.ready中调用它。

Answer 1

1. 从ui:repeat删除您的script标签，因为不需要ui:repeat该script标签，并在关闭body之后将其移动。

2. 您需要始终为元素使用唯一的id 。 如果不是，则改为更改其class 。

     <ui:repeat id="repeat" value="#{bean.list}" var="item" varStatus="status"><h:form id="supervisorCircleForm"> <p:dataTable id="supervisor_table" var="pass" value="#{bean.insideList}"> <p:column headerText="Name" styleClass="center"> <h:outputText value="#{pass.memberName}"/> </p:column> <p:column headerText="Companies" styleClass="center"> <select class="taxiCircle" multiple="multiple"> <c:forEach var="item" items="${bean.companyList}"> <option value="${item.value}">${item.label} </option> </c:forEach> </select> </p:column> </p:dataTable> </h:form> </ui:repeat> <script type="text/javascript"> (function(){ $('.taxiCircle').multiselect(); console.log("Func Called"); })(); </script>