我在页面中使用 Chosen jQuery 插件。
我有一个下拉列表，它在选择时调用 backbean 函数并使用 f:ajax 填充另一个下拉列表的值，例如：
<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>