如何根据前一个组合框的内容更改组合框的内容？

Question

我有一个包含两个组合框的页面。我想以一种方式制作它们，当我更改第一个组合框时，从数据库获取的第二个组合框的内容也会更改。我该怎么做呢？

Answer 1

执行此类操作的通常方法是通过 AJAX。您可以轻松地将 AJAX 行为添加到第一个 DropDownChoice 中，以便填充/刷新第二个 DropDownChoice 的选项。

假设您正在使用 IModel 来获取两个 DropDownChoice 的选择。获取第二个 DropDownChoice 选项的 IModel 将使用第一个 DropDownChoice 的 ModelObject（因为它是依赖的）。

private DropDownChoice ddcCountry;
private DropDownChoice ddcCity;
//...

IModel countriesModel = new LoadableDetachableModel(){
   @Override
   protected Object load() {
      return myService.getCountries();
   }
};
IModel citiesModel = new LoadableDetachableModel(){
   @Override
   protected Object load() {
      if (ddcCountry.getModelObject() != null){
          return myService.getCities(ddcCountry.getModelObject());
      }
      else { return new ArrayList(); }
   }
};
ddcCountry = new DropDownChoice("country", null, countriesModel);
ddcCity = new DropDownChoice("city", null, citiesModel);

您可以附加 AjaxFormComponentUpdatingBehavior 到第一个 DropDownChoice。这将在 标记上输出 onchange HTML 事件处理程序，以便它将使用以下内容更新 DropDownChoice 的模型对象：选择的值，然后会调用你的Behavior的onUpdate()。在 onUpdate() 方法中，您只需将第二个 DropDownChoice 添加到 AjaxRequestTarget 通过带有更新选项的 ajax 响应将其写回。请记住使用 setOutputMarkupId(true ) 在您将添加到 AjaxRequestTarget 的所有组件上。

例如，对于包含国家和城市的 2 个相关选择：

ddcCity.setOutputMarkupId(true);
ddcCountry.add(new AjaxFormComponentUpdatingBehavior(){
    @Override
    protected void onUpdate(AjaxRequestTarget target) {
        // here, ddcCountry's ModelObject has been already updated.
        ddcCity.setModelObject(null); // clear selection 
        if (target != null) { 
            // Adding the ddc to the AjaxRequestTarget will write
            // it back to the ajax response with new options pulled 
            // from the choices model.
            target.addComponent(ddcCity);
        }
    }
}

如果您没有使用 IModels 进行选择（即在构造函数中使用 List 对象），您将只需要在 onUpdate 方法中获取新的 List，并使用 ddcCity href="http://wicket.apache.org/apidocs/1.4/org/apache/wicket/markup/html/form/AbstractChoice.html" rel="nofollow">setChoices()< /a>.您可以使用 getComponent() 方法。

protected void onUpdate(AjaxRequestTarget target) {
    // here, ddcCountry's ModelObject has been already updated.
    List cities = myService.getCities(getComponent().getModelObject());
    ddcCity.setChoices(cities);
    ddcCity.setModelObject(null); // clear selection 
    if (target != null) { 
        target.addComponent(ddcCity);
    }
}

如果您想支持没有 javascript 的用户，您应该添加一个默认禁用处理的提交按钮（也许在

有关其他参考，请参阅此 DropDownChoice 示例 Wicket wiki 页面，您可能会找到“ Ajax”部分很有趣。