Question

我有一个包含两个组合框的页面。我想以这样的方式制作它们：当我更改第一个组合框时，第二个组合框的内容（从数据库中获取）会被更改。我该怎么办？

Answer 1

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

假设您正在使用IModel来获取DropDownChoice的两个选项。获得第二个IModel选项的DropDownChoice将使用第一个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标记上输出<select> HTML事件处理程序，以便它将使用所选值更新DropDownChoice的模型对象，然后调用您的行为{{3 }}。在onUpdate()方法中，您只需将第二个DropDownChoice添加到onUpdate()，然后通过带有更新选项的ajax响应将其写回。请务必对要添加到AjaxRequestTarget的所有组件使用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个对象），您只需要在{{{{}}中获取新的List 1}}方法，并使用setOutputMarkupId(true)将其设置为onUpdate。您可以使用setChoices()方法获取ddcCity行为受限制。

Component

如果你想支持没有javascript的用户，你应该添加一个提交按钮（可能在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); } }标签？），默认处理已禁用，并在按钮<noscript>中执行相同的逻辑

有关其他参考信息，请参阅此getComponent() Wicket wiki页面，您可能会发现“Ajax”部分很有趣。

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

1 个答案: