似乎每次我学习一个新平台,我都必须重新解决同样的老问题:
使用Ajax更改另一个下拉列表时,在一个下拉列表中更新选项.这次
该框架是Wicket.
原文链接:https://www.f2er.com/ajax/159915.html使用Ajax更改另一个下拉列表时,在一个下拉列表中更新选项.这次
该框架是Wicket.
我有两个实体,我称之为Foo和Bar,每个Foo都有一个类别,这是Foo内部的枚举.此外,存在一个带有重载的find()方法的FooDAO:no-arg版本返回DB中的所有Foo,或者具有类型Foo的参数“filter”的版本,它返回非空值中的所有Foo匹配过滤器.
客户希望在创建新条形图时将Foos与条形图关联,但在添加条形图之前按类别过滤Foos.因此假设已经存在少数Foo,每个都有一个类别.用户进入创建栏页面和添加新Foo的部分:下拉列表A列出类别,并且在选择类别时,下拉列表B应该通过Ajax更新显示该类别中可用Foo的列表.请注意,没有选择类别,下拉列表B应显示所有可用的Foo.
我的HTML看起来有点像这样:
<form wicket:id="createBarForm"> <div> <label>Category</label> <select wicket:id="category"> </select> </div> <div> <label>Available Foo(s)</label> <select class="xlarge" wicket:id="selectedFoo"> </select> </div> <button style="float:right;">Add</button> <!-- and more Bar related fields --> </form>
(该按钮最终将获得自己的id和行为,但现在焦点在于列表.)
createBarForm = new Form<Bar>("createBarForm",new CompoundPropertyModel<Bar>()); final List<Foo> availableFoo = fooDao.find(); final FormComponent<Foo> selectedFoo = new DropDownChoice<Foo>("selectedFoo",Model.of(new TechnologyFoo()),availableFoo); Foo.Category categoryStandin = null; final FormComponent<Foo.Category> fooCategory = new DropDownChoice<Foo.Category> ("fooCategory",Model.of(categoryStandin),Arrays.asList(Foo.Category.values())); fooCategory.add(new AjaxFormComponentUpdatingBehavior("onchange") { private static final long serialVersionUID = 1L; @Override protected void onUpdate(AjaxRequestTarget target) { // re-set the form component availableFoo.clear(); ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo); createBarForm.remove(selectedFoo); Foo.Category newSelection = fooCategory.getModelObject(); if (newSelection != null) { Foo filter = new Foo(); filter.setCategory(newSelection); availableFoo.addAll(fooDao.find(filter)); } else { availableFoo.addAll(fooDao.find()); } // re-fresh the form component ((DropDownChoice<Foo>)selectedFoo).setChoices(availableFoo); createBarForm.add(selectedFoo); } }); createBarForm.add(fooCategory); createBarForm.add(selectedFoo); // etc.....
我没有显示我的logger.debug调用,但是使用它们我能够显示正确捕获了newSelection,并且DAO正在返回预期的Foo列表.此外,avaliableFoo列表也包含所需的值.但是,Dropdown B始终显示Foo的完整列表,无论如何
类别选择.