Wicket中Select2级联下拉框默认值设置及动态更新问题

Hey there! Let's work through fixing your cascading Select2 dropdowns in Wicket. I see you're trying to set default values to the first option of each list, and have the second dropdown's default update automatically when the first changes—let's get that sorted.

What's causing the issue? #

Looking at your code, the default value for the second dropdown only gets set once during initialization. When the first dropdown changes, you're updating the parent component but not re-setting the second dropdown's default value to the first option of its new, filtered list. Also, manually destroying and re-focusing the Select2 instance isn't necessary (Wicket handles Select2 re-initialization after Ajax updates automatically) and might be interfering with proper value binding.

Here's the fix #

Let's adjust your code to ensure default values are set both on initialization and whenever the second dropdown's options change. We'll also clean up the Ajax behavior and add proper event handling in the parent component.

Step 1: Refactor the ValueEditor class

First, let's extract the default value logic into a reusable method, and remove unnecessary Select2 destroy/focus code:

private static class ValueEditor extends Select2Choice<String> {
    private static final long serialVersionUID = SingleFiniteValueEditor.serialVersionUID;

    ValueEditor(String id, EditableSingleFiniteModel<?> model, ChoiceProvider<String> provider) {
        super(id, model.valueModel(), provider);
        setOutputMarkupId(true);
        getSettings().setDropdownAutoWidth(true);
        getSettings().setCloseOnSelect(true);
        getSettings().setPlaceholder("");
        getSettings().setAllowClear(!model.mandatory());
        
        // Set default value on initialization
        setDefaultValue(model);
    }

    // Reusable method to set default value to first option
    private void setDefaultValue(EditableSingleFiniteModel<?> model) {
        List<String> choices = model.choices().getObject();
        // Only set if no value is already selected
        if (!choices.isEmpty() && model.valueModel().getObject() == null) {
            model.valueModel().setObject(choices.get(0));
        }
    }

    @Override
    protected void onInitialize() {
        super.onInitialize();
        add(new OnChangeAjaxBehavior() {
            private static final long serialVersionUID = SingleFiniteValueEditor.serialVersionUID;

            @Override
            protected void onUpdate(AjaxRequestTarget target) {
                // Send event to parent component to trigger second dropdown update
                send(getComponent(), Broadcast.BUBBLE, new ValueChangedEvent());
            }
        });
        add(AttributeModifier.append("style", "min-width:200px;"));
    }

    @Override
    protected void onComponentTag(ComponentTag tag) {
        tag.setName("select");
        super.onComponentTag(tag);
    }

    // Ensure default value is set every time the component renders (including after Ajax updates)
    @Override
    protected void onBeforeRender() {
        super.onBeforeRender();
        EditableSingleFiniteModel<?> model = (EditableSingleFiniteModel<?>) getDefaultModel();
        setDefaultValue(model);
    }
}

Step 2: Handle cascading updates in the parent component

In your parent panel/page, listen for the ValueChangedEvent from the first dropdown, update the second dropdown's options, and trigger an Ajax update:

public class YourParentComponent extends Panel {
    public YourParentComponent(String id) {
        super(id);

        // Initialize first dropdown
        EditableSingleFiniteModel<?> firstModel = // Your first dropdown model
        ChoiceProvider<String> firstProvider = // Your first choice provider
        ValueEditor firstDropdown = new ValueEditor("firstDropdown", firstModel, firstProvider);
        add(firstDropdown);

        // Initialize second dropdown (options depend on first dropdown's selection)
        EditableSingleFiniteModel<?> secondModel = // Your second dropdown model
        ChoiceProvider<String> secondProvider = // Your second choice provider
        ValueEditor secondDropdown = new ValueEditor("secondDropdown", secondModel, secondProvider);
        add(secondDropdown);

        // Listen for changes in the first dropdown
        subscribe(this, ValueChangedEvent.class, event -> {
            if (event.getSource() == firstDropdown) {
                AjaxRequestTarget target = RequestCycle.get().find(AjaxRequestTarget.class).orElse(null);
                if (target != null) {
                    // Update the second dropdown's choices based on the first dropdown's selected value
                    String selectedFirstValue = firstModel.valueModel().getObject();
                    secondModel.choices().setObject(getFilteredSecondChoices(selectedFirstValue));

                    // Add the second dropdown to the Ajax target to refresh it
                    target.add(secondDropdown);
                }
            }
        });
    }

    // Replace this with your logic to get filtered options for the second dropdown
    private List<String> getFilteredSecondChoices(String firstSelectedValue) {
        // Return the appropriate list based on the first dropdown's selection
    }
}

How this works #

1. Initial default values: The setDefaultValue method runs on initialization, ensuring both dropdowns start with their first option selected.
2. Cascading updates: When the first dropdown changes, the parent component updates the second dropdown's options and triggers an Ajax refresh.
3. Dynamic default values: The onBeforeRender method in ValueEditor runs every time the component renders (including after Ajax updates), so the second dropdown will automatically set its default to the first option of the new filtered list.

This should resolve your issue and give you the cascading default behavior you need!

内容的提问来源于stack exchange，提问作者Amita Yadav