Capture value of Dropdown Selection everytime it changes

[c0pper]

Hi how do I capture the value of the item selected in the Dropdown Selection so that the capturing variable is updated each time the selection changes?

Expected:
In the example I tried below I'd like to print the Dropdown Selection value each time i change it in the browser

Actual result:
the print happens only once when the program is started and never more

from nicegui import ui

def set_allow_moving(val):
    return val.value

select1 = ui.select([1, 2, 3], value=1, on_change=set_allow_moving)

print(set_allow_moving(select1))

ui.run()

[falkoschindler]

If you want to print the value whenever it changes, you should do it in the change event handler:

def set_allow_moving(event):
    print(event.value)

ui.select([1, 2, 3], value=1, on_change=set_allow_moving)

[falkoschindler]

You can assign global variables like this:

select_value = 1

def set_allow_moving(event):
    global select_value
    select_value = event.value

ui.select([1, 2, 3], value=select_value, on_change=set_allow_moving)

See #268 (reply in thread) for alternative implementations for updating global state.

[pzauner]

Why does ui.button("Print select_value", on_click=lambda: print(select_value)) not print the updated select_value though?
I find this behavior counter-intuitive.

Suppose the following snippet:

select_value = 1

def set_allow_moving(event):
    global select_value
    select_value = event.value
    print(select_value) # prints out actual selection after change


ui.select([1, 2, 3], value=select_value, on_change=set_allow_moving)
ui.button("Print select_value", on_click=lambda: print(select_value)) # prints out the initial select_value of 1

[pzauner]

Maybe I lack some crucial understanding on python datatypes.

However thanks to your linked reply above, the easiest way for me is to just use the dataclass method:

from nicegui import ui
from dataclasses import dataclass  

@dataclass
class SelectValue:
    selected: int
    
value = SelectValue(1)

def handle_selected():
    print(value.selected)


ui.select([1, 2, 3], value=value.selected).bind_value_to(value, "selected")
ui.button("Print value.selected", on_click=handle_selected) # prints out the value.selected always according to current selection
ui.button("Notify value.selected", on_click=lambda: ui.notify(value.selected)) # notifies the value.selected always according to current selection

ui.run()

[falkoschindler]

Strange. When I try your snippet from #538 (reply in thread), it does print the current selection - just as expected.

[pzauner]

Ok, I did some testing again.
I should have used nonlocal instead of global for this to work. I was already in a function..

I hope the following snippet explains my prior situation and helps others stumbling upon the same issue. I should have tested it before posting, sorry for the inconvenience.

from nicegui import ui

@ui.page("/")
def mainpage():
    select_value = 1

    ui.label("MAINPAGE")
    ui.button("other page",on_click=lambda: ui.navigate.to("/other"), icon='list').props('flat')
    
    def set_allow_moving(event):
        global select_value # won't work as nonlocal variable »select_value« isn't global
        select_value = event.value
        print(f"Dropdown Selection on_change trigger on main page: {select_value}") # prints out actual selection after change, because referenced variable »select_value« got updated just before 


    ui.select([1, 2, 3], value=select_value, on_change=set_allow_moving)
    ui.button("Print select_value", on_click=lambda: print(select_value)) # prints out the initial select_value of 1
    ui.button("notify select_value", on_click=lambda: ui.notify(select_value)) # notifies with the initial select_value of 1 


@ui.page("/other")
def otherpage():
    different_value = 1

    ui.label("OTHERPAGE")
    ui.button("main page",on_click=lambda: ui.navigate.to("/"), icon='list').props('flat')

    def set_allow_moving(event):
        nonlocal different_value
        different_value = event.value
        print(f"Dropdown Selection on_change trigger on other page: {different_value}")

    ui.select([1, 2, 3], value=different_value, on_change=set_allow_moving)
    ui.button("Print different_value", on_click=lambda: print(different_value)) # works properly as nonlocal variable (form referencepoint of manipulating function) »different_value« got updated correct
    ui.button("Notify different_value", on_click=lambda: ui.notify(different_value)) # works now as well
ui.run()