How to make cascading updates to SelectBox in a Modal form?

[jwag59]

I have a modal form with three SelectBox elements. See screenshot below. I want to be able to change the content of the 2nd SelectBox (i.e. the 'data' option) based on the user selection from the first. And similarly for the 3rd SelectBox based on what the user selects in the 2nd box.

My current method (which does not work) is as folows:

Modal definition:

   return ShowModalForm('New Repo', [
       SelectBox('Distro', id='distroselect', data=Config.cfg_int['repos']['supported_repos'], placeholder="Select One", on_change=distro_selected, required_message='You must select a Distribution for the new Repo'),
       SelectBox('Version', id='versionselect', data=[], placeholder="Select One", required_message='You must select a version of the repo'),
       SelectBox('Architecture', id='archselect', data=[], placeholder="Select One", required_message='You must select an architecture for the Repo'),
       Upload(title='Upload a new ISO or Repo tar file', name='repo_upload', on_data=on_repoupload),

And the on_change=distro_selected function returns:

return [UpdateElement('versionselect', data=Config.cfg_int[data.lower()]['supported_versions'])]

But the Version id SelectBox always shows No Data!!

Any hints on how to do this?