DropDownChoice Examples

Table of contents

Simple Example

There is no "default" value. the value selected in the dropdown will be the one that is set in the model that the drop down uses. so when you submit, the selected object is pushed into the model, when dropdown renders the selected object is the one that is pulled from the model.

ie:

public Page extends WebPage {
   private List letters=Arrays.asList(new String[] { "A", "B", "C" }));
   public String selected="B";

   public Page() {
     Form form=new Form("form");
     DropDownChoice choice=new DropDownChoice("ddc", new PropertyModel(this, "selected"), letters);
}

when this page renders, the letter B will be selected because it is the object inside the drop down's model.

-Igor

[Taken from a wicket-user posting - Gwyn 22:57, 9 Apr 2006 (BST)]

More Examples

These are taken from a working app, but cut & pasted, etc, so there may be issues that mean that they won't compile directly - we'll have to see...

Basically, the values in the PhoneModel dropdown depend on the selected PhoneVendor and the examples show two ways of doing the same thing, i.e. updating the PhoneModel DropDown when the PhoneVendor changes.

The HTML

    <form wicket:id="form">
      <select name="PhoneVendor" wicket:id="phoneVendor"></select>
      <select name="PhoneModel" wicket:id="phoneModel"></select>
    </form>

Using onSelectionChanged

   private DropDownChoice _phoneModelDDC;
   private MyModel _myModel = new MyModel();

   public MyPage(PageParameters parameters) {
        Form form = new Form("form", new CompoundPropertyModel(_myModel));
        add(form);

        addPhoneVendor(form);
        _phoneModelDDC = addPhoneModel(form);
    }

    private void addPhoneVendor(final Form form) {
        ArrayList phoneVendors = new ArrayList(getMySession().getTerminalVendors());
        form.add(new DropDownChoice("phoneVendor", phoneVendors) {
            /**
             * Whether this component's onSelectionChanged event handler should called using
             * javascript if the selection changes. 
             *
             * @return True if this component's onSelectionChanged event handler should
             *         called using javascript if the selection changes
             */
            protected boolean wantOnSelectionChangedNotifications() {
                return true;
            }

            /**
             * Called when a option is selected of a dropdown list that wants to be
             * notified of this event.
             *
             * @param newSelection The newly selected object of the backing model
             */
            protected void onSelectionChanged(final Object newSelection) {
                String phoneVendor = (String) newSelection;
                _myModel.setPhoneModel(null);   // Reset the phone model when the vendor changes
                phoneModelDDC.setChoices(getTerminalsByVendor(phoneVendor));
            }
        });
    }

    private DropDownChoice addPhoneModel(Form form) {
        List list = Collections.EMPTY_LIST;
        String phoneVendor = _myModel.getPhoneVendor();
        if (phoneVendor != null) {
            list = getTerminalsByVendor(phoneVendor);
        }

        DropDownChoice phoneModelDDC = new DropDownChoice("phoneModel", list) {
            protected boolean wantOnSelectionChangedNotifications() {
                return true;
            }
        };
        form.add(phoneModelDDC);
        return phoneModelDDC;
    }

Using Ajax

   private DropDownChoice _phoneVendorDDC, _phoneModelDDC;
   private MyModel _myModel = new MyModel();

   public MyPage(PageParameters parameters) {
        Form form = new Form("form", new CompoundPropertyModel(_myModel));
        add(form);

        _phoneVendorDDC = getPhoneVendorDDC(form);
        _phoneModelDDC = getPhoneModelDDC(form);

        form.add(_phoneVendorDDC);
        form.add(_phoneModelDDC);
    }

    private DropDownChoice getPhoneVendorDDC(final Form form) {
        ArrayList phoneVendors = new ArrayList(getMySession().getTerminalVendors());
        DropDownChoice phoneVendorDDC = new DropDownChoice("phoneVendor", phoneVendors);
        // Add Ajax Behaviour...
        phoneVendorDDC.add(new AjaxFormComponentUpdatingBehavior("onchange") {
            protected void onUpdate(AjaxRequestTarget target) {
                // Reset the phone model dropdown when the vendor changes
                _myModel.setPhoneModel(null);
                _phoneModelDDC.setChoices(getTerminalsByVendor(_myModel.getPhoneVendor()));
                target.addComponent(_phoneModelDDC);
            }
        });
        return phoneVendorDDC;
    }

    private DropDownChoice getPhoneModelDDC(Form form) {
        List list = Collections.EMPTY_LIST;
        String phoneVendor = _myModel.getPhoneVendor();
        if (phoneVendor != null) {
            list = getTerminalsByVendor(phoneVendor);
        }
        DropDownChoice phoneModelDDC = new DropDownChoice("phoneModel", list);
        phoneModelDDC.setOutputMarkupId(true);  // Needed for Ajax to update it
        return phoneModelDDC;
    }

Note:<br>
When using a dropdown that was initialised to use a nullSelection
string (e.g. "Choose One") and onSelectionChanged, when a choice is
made the dropdown gets reloaded. As it's no longer got a null
selection, the "Choose One" string doesn't appear (which may affect
the width of the dropdown if it was previously the longest option
string).<br>
If AJAX is used instead, the dropdown doesn't itself get reloaded, so
the nullSelection string remains (and can still be selected.)

Child pages