# DropDown update

**URL:** <https://community.plotly.com/t/dropdown-update/8187>\
**Category:** Dash Python\
**Created:** [February 6, 2018, 5:47am UTC](https://community.plotly.com/t/dropdown-update/8187 "2018-02-06T05:47:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![FFT](https://avatars.discourse-cdn.com/v4/letter/f/e8c25b/32.png) [@FFT](https://community.plotly.com/u/FFT)\
**Post date:** [February 6, 2018, 5:47am UTC](https://community.plotly.com/t/dropdown-update/8187/1 "2018-02-06T05:47:51Z")

</div>

I have a problem with the following code where the dropdwon doesn show the selected item after I click on the items. I get some items from SQL Db and it shows on the DropDown items, however, when I click on this items they dont appear as the value of the DropDown . Can anyone help me find the problem there.

import dash  
import dash\_core\_components as dcc  
import dash\_html\_components as html  
from dash.dependencies import Input, Output, State, Event  
import Query  
app = dash.Dash()

colors = {  
‘background’: ‘#7FDBFF’,  
‘text’: ‘1111111’  
}  
[obj=Query.CI](http://obj=Query.CI)()

app.layout = html.Div([  
html.H1(style={‘backgroundColor’: colors[‘background’]},children=“test”),

```
html.Div( style={
    'textAlign': 'center',
    'color': colors['text']
},children='''
    List of industries:
'''),
html.Label('Enter nmi or industry name'),

dcc.Input(id='my-id'),
dcc.Dropdown(id='comp-id', multi=False),

html.Button('Submit!', id='my-button'),
html.Div(id='my-div')

```

])

@app.callback(  
Output(component\_id=‘comp-id’, component\_property=‘options’),  
[Input(‘my-button’, ‘n\_clicks’)],  
state=[State(component\_id=‘my-id’, component\_property=‘value’)]  
)  
def update\_output\_div(n\_clicks, input\_value):  
data = obj.get\_companies\_nmi(input\_value)  
return [{‘label’: i, ‘value’: i} for i in data]

@app.callback(  
Output(component\_id=‘my-div’, component\_property=‘children’),  
[Input(‘comp-id’, ‘value’)]  
)  
def update\_output\_div(input\_value):

```
return str(input_value)

```

if **name** == ‘ **main** ’:  
app.run\_server(host= ‘0.0.0.0’,debug = False)

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [February 6, 2018, 8:56am UTC](https://community.plotly.com/t/dropdown-update/8187/2 "2018-02-06T08:56:32Z")

</div>

I’m not exactly sure by what you mean by not appearing as the value of the Dropdown. I can’t see anything jumping out as being a problem. Here’s a modified version of your code with some dummy labels. It seems to work as I think it’s meant to.

Does it behave how you expect?

Note that you might want an initial value for the Input component if you don’t want the initial callback on pageload to receive a value of `None`

```python
import dash                                    
import dash_core_components as dcc             
import dash_html_components as html            
from dash.dependencies import Input, Output, State, Event                                      

app = dash.Dash()                              
colors = {                                     
    'background': '#7FDBFF',                   
    'text': '1111111'                          
}                                              

app.layout = html.Div([                        
    html.H1(style={'backgroundColor': colors['background']}, children='test'),                                                                                                                 
    html.Div("List of industries:", style={    
        'textAlign': 'center',
        'color': colors['text']
    }),
    html.Label('Enter nmi or industry name'),
    dcc.Input(id='my-id', value='5'),
    dcc.Dropdown(id='comp-id', multi=False),
    html.Button('Submit!', id='my-button'),
    html.Div(id='my-div')
])

@app.callback(
Output('comp-id', 'options'), [Input('my-button', 'n_clicks')], [State('my-id', 'value')])
def update_output_div(n_clicks, input_value):
    return [{'label': str(i), 'value': str(i)} for i in range(int(input_value))]

@app.callback(
Output('my-div', 'children'), [Input('comp-id', 'value')])
def update_output_div(input_value):
    return input_value

if __name__ == ' __main__':
    app.run_server(host='0.0.0.0', debug = False)

```

---

<div class="post-metadata">

**Author:** ![FFT](https://avatars.discourse-cdn.com/v4/letter/f/e8c25b/32.png) [@FFT](https://community.plotly.com/u/FFT)\
**Post date:** [February 6, 2018, 9:55pm UTC](https://community.plotly.com/t/dropdown-update/8187/3 "2018-02-06T21:55:13Z")

</div>

Hi Ned

Thanks for your reply. Your code works fine. The problem with my code is that I have to get a list after clicking the submit button which updates the list of dropdown. That part works fine and I see the list of dropdown, however, after I click on any item of the dropdown this item dosnt appear as the value of the dropdown or it doesnt come on top of the dropdown to show what item is selected. In this case after clicking on items the dropdowm still shows empty space. I hope I could make it more clear to you. I added the second callback function to make sure that the value of the dropdown gets updated after each click and it does but I dont know why this value isnt being shown in dropdown.

I appreciate your help.

---

<div class="post-metadata">

**Author:** ![freshwuzhere](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@freshwuzhere](https://community.plotly.com/u/freshwuzhere)\
**Post date:** [May 31, 2018, 12:33pm UTC](https://community.plotly.com/t/dropdown-update/8187/4 "2018-05-31T12:33:30Z")

</div>

@nedned I have a similar problem - when dropdown length exceeds 9 values - the last entries are unpickable and scroll to the bottom become erratic/impossible.

Is this a bug?

Python 3.5.2  
Flask 1.0.2  
dcc 0.22.1

---

<div class="post-metadata">

**Author:** ![gothicfan100](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/gothicfan100/32/3784_2.png) [@gothicfan100](https://community.plotly.com/u/gothicfan100)\
**Post date:** [August 6, 2018, 11:56am UTC](https://community.plotly.com/t/dropdown-update/8187/5 "2018-08-06T11:56:14Z")

</div>

I have the same problem: gets stuck at the 5th value instead. Anyone knows something?

EDIT: Link to my issue. My issue was solved (the `value` in `options` needs to be unique): [Dropdown menu update/scroll bug?](https://community.plotly.com/t/dropdown-menu-update-scroll-bug/12440/7)