複数選択が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> 

初期化部分が毎回呼び出されていますが、選択ボックスは1回だけ表示されます。私はdocument.readyでもそれを呼び出そうとしました。

Answer 1

1. bodyを閉じた後繰り返し、それを移動させる必要がないようui:repeatからあなたscriptタグを削除します。

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>