How to show new ui elements based on another?

[siwikm]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

def main():
    container = ui.column()
    current_children = [] 

    def clear_current():
        for c in current_children[:]:
            try:
                c.delete()
            except Exception:
                pass
        current_children.clear()

    def update_selects(choice: str):
        clear_current()
        with container:  # ensure new selects go into the container
            if choice == "A":
                s = ui.select(["A1_option1", "A1_option2"], label="Select A1")
                current_children.append(s)
            elif choice == "B":
                s1 = ui.select(["B1_option1", "B1_option2"], label="Select B1")
                s2 = ui.select(["B2_option1", "B2_option2"], label="Select B2")
                current_children.extend([s1, s2])
            # if choice == "C": do nothing (no new selects)

    ui.label("Pick main option:")
    ui.select(["A", "B", "C"], on_change=lambda e: update_selects(e.value))
main()
ui.run(port=8765)

Description

This is super hacky way which still does not works as expected. Goal is to based on one selected value from first select generate more ui elements (ui.select, ui.checkbox etc.) based on selected value. And after this value changed unnecessary elements should be gone.

NiceGUI Version

2.24.1

Python Version

Python 3.11.1

Browser

Chrome

Operating System

macOS

Additional Context

No response

[Anindya088]

Hi @msiwik-epruf ,

Just to understand this properly, do you mean to delete everything and create the elements fresh based on the logic? Then we can simply clear() them everytime. Something like this below:

I put the container below the initial label and select, so that it does not jump up after creating the elements.

from nicegui import ui

ui.label("Pick main option:")
ui.select(["A", "B", "C"], on_change=lambda e: update_selects(e.value))

container = ui.column()

def update_selects(choice: str):
    container.clear()
    with container:  # ensure new selects go into the container
        if choice == "A":
            s = ui.select(["A1_option1", "A1_option2"], label="Select A1")
        elif choice == "B":
            s1 = ui.select(["B1_option1", "B1_option2"], label="Select B1")
            s2 = ui.select(["B2_option1", "B2_option2"], label="Select B2")
        # if choice == "C": do nothing (no new selects)


ui.run()

But if I understood wrong, please let me know.

Thanks,
Anindya

[rodja]

You could also use ui.refreshable