Как я могу изменить содержимое поля со списком на основе содержимого предыдущего? - PullRequest
Новая
       0

Как я могу изменить содержимое поля со списком на основе содержимого предыдущего?

1 голос
/ 11 октября 2011

У меня есть страница, содержащая два поля со списком.Я хочу сделать так, чтобы при изменении первого поля со списком содержимое второго поля со списком, полученного из базы данных, менялось.Как я могу это сделать?

1 Ответ

4 голосов
/ 11 октября 2011

Обычный способ выполнения операций такого типа - через AJAX.Вы можете легко добавить AJAX Behavior к первому DropDownChoice, чтобы заполнить / обновить варианты второго DropDownChoice.

Допустим, вы используете IModel s, чтобы получить варианты обоих DropDownChoice s.IModel, который получает выбор для второго DropDownChoice, будет использовать ModelObject первого DropDownChoice (потому что он зависит). 

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 на тег <select>, так что он обновит объект модели DropDownChoice с выбранным значением, а затем вызовет 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 объекты в конструкторах)), вам просто нужно получить новый List в методе onUpdate и установить его на ddcCity с setChoices().Вы можете получить Component, к которому привязано поведение, с помощью метода 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, вы должны добавить кнопку отправки(может быть в теге <noscript>?) с отключенной обработкой по умолчанию, и выполните ту же логику в кнопке onSubmit.

Для получения дополнительной справки см. Примеры DropDownChoice Wiki wikiстраница, вы можете найти интересным раздел "Ajax".

...