jQuery Chosen和JSF2 f：ajax渲染问题

Question

我正在页面中使用选择的jQuery插件。

我有一个下拉列表，在选择中调用backbean函数并使用f：ajax将另一个下拉列表的值popwise，如下所示：

<h:selectOneListbox id="drop1"
                   value="#{myBean.drop1Value}" 
                   styleClass="chzn-select">
      <f:ajax event="valueChange" listener="#{myBean.doSomething}"
                     render="drop2"/>
      <f:selectItems value="#{myBean.drop1Values}" />
</h:selectOneListbox>

<h:selectOneListbox id="drop2" 
                    value="#{myBean.drop2Value}" 
                    styleClass="chzn-select">
      <f:selectItems value="#{myBean.drop2Values}" />
</h:selectOneListbox>

问题是，在事件完成时，drop2会被重新渲染，并且我仍然会在其旁边显示旧的空选下拉列表，如下所示：

我尝试添加：

   <f:ajax event="valueChange" listener="do something"
                     render="drop2" onevent="updateDropdown" />

   function updateDropdown(event) {
      if(event.status == 'success'){
          $('.chzn-select').chosen();
      }
   }

但是只是选择了更新的drop2。旧选择的下拉列表仍在那里。谁能告诉我如何处理这种情况？谢谢

可能的解决方案？

    <script>
            function updateDropDowns(event){
                if(event.status == 'success'){

                    //this line removes the previous Chosen dropdown 
                    //the problem was that when the drop2 was being updated by f:ajax render
                    // i would end up with two Chosen Divs so removing the old div before 
                    //reattaching Chosen to select component seems to do good and eliminate duplicated 
                    //chosen dropdowns!

                    $('div [id$="drop2_chzn"]').remove();
                    //this lines attaches Chosen to the updates plugin
                    $('.chzn-select').chosen();
                }
            }
        </script>

Answer 1

试试这个：用h:panelGroup包装drop2，给它一个Id并渲染它

而不是render="drop2"做render="drop2_wrapper"

应该消除重复