I would like to populate a list with values from a database and then select (multiple) values of that list to generate graphs.
Looking through the help of html.Select, I could not figure out how to access the selected values. The only property containing data that dash seems to provide access to is the ‘children’, but this has no info on whether a value is selected or not. I tried accessing various properties of both the html.Select as well as the parent html.Form object in all permutations I could think of.
It would be really great if someone can point me in the right direction. I understand that the html components probably don’t have as high a priority in documentation and features compared to the core components. Sorry if this is a trivial issue, but I don’t know whether to look for a solution in Dash or html. I’m running the dash app in a Flask server instance (to later implement several dash apps), so one option would probably be to generate the form in a flask template, but I was hoping to do it from within Dash.
Below is a snippet of how I generate the select list and want to use it in a callback.
app.layout = html.Div(
html.Select(html.Option([i for i in wafers.WaferID.values[:10]]), size='10', multiple='multiple',name='wafer_list', id='wafer_list')
, name='wafer_form', id='wafer_form', method='POST')
def update_plot(WaferID, state):
# use selected values from callback of 'wafer_list' or 'wafer_form' to update Graph
dash_html_components aren’t interactive by default, so things like
html.Select won’t work (right now). In their place, interactive forms in
dash_core_components are provided:
html.Select, can you use
Thank you for your feedback. The problem with the dropdown is that the list will contain several hundred items and there’s up to maybe a dozen, often non-consecutive items to select. With a select box of the right size and vertical scrollbar that is way easier than with a dropdown.
I think I’ll create the with flask for now. If I had more experience in html and js I’d be happy to help with the html_components, because I really like the concept of dash.
In this case, it sounds like the built-in search bar of the
dcc.Dropdown element would come in handy. Here’s a dropdown with 1000 items and
If the height of the option list was customizable (instead of showing 6 options by default you could show 100 options or enough options to fit the size of the page), would that make this component useful in your use case? Are there any other customizations that you need?
Damn, I did not think of the filter option! This will actually work - typically we’d know the first few characters of the ID string, this will reduce it to a fairly small dropdown list.
The only advantage of the select options list would be that it’s easier to select slices, where the dropdown will reset the filter string in the search bar or the list of items in the dropdown with the first click on one of the items (i.e. can’t do a click and then shift+click for slice select). But I think this will still be a good solution.
Thank you for your help!
I just spent some time trying to figure out how
html.Select works (without JS or other stuff) to try to answer this question. Couldn’t quite figure it out. Anybody familiar with this? Do you need to put it in a form?
I’m in the same boat. Tried numerous things but could not figure it out. The only I can get back from a select list is for each option how many times it has been clicked and when the last click was. I have been unable to figure out how to find out which items are actually selected though. I also opened a new topic on this yesterday here: List with easy multi-select
No reply as of yet.
Lol - I meant to reply on your thread with the above message.