0

I am trying to build a simple tool in python here that simply asks the user to select a fruit type and then a color type from two drop down options and then, based on the user input, print a string that reads: "I would love to try a color fruit!". I am using IPyWidget for the dropdown functionality. I am trying to accomplish this in a Jupyter Notebook.

Here is what I have so far:

import ipywidgets as widgets

country_list=['Banana', 'Apple','Lemon','Orange']
color_list=['Blue', 'Red', 'Yellow']

def update_dropdown(change):

    print(change.new)

drop1 = widgets.Dropdown(options=country_list, value='Banana', description='Fruit:')
drop1.observe(update_dropdown,names='value')
display(drop1)

drop2 = widgets.Dropdown(options=color_list, value='Blue', description='Color:')
drop2.observe(update_dropdown,names='value')
display(drop2)

This directly produces these two dropdown, which is what I want to see: enter image description here

However, I am a bit unsure about the functionality. My dropdown options list the first two potential choices, and so below these dropdowns, I want to see the string "I would love to try a blue banana!" printed. And so I want each dropdown option to be stored in a variable, fruit and color, so that there is a dynamic/changing print function that responds directly to the dropdown options chosen. And so, once the user for example selects "Apple", the print statement would change to "I would love to try a blue apple!", and once the user then chooses "Yellow", the print statement would change to "I would love to try a yellow apple!", and so forth, only showing a single print statement at a time.

My confusion with accomplishing this, is I am not sure how to get those fruit and color variables set up, since they both are stored in 'change.new' in my code, within each dropdown function. When I try to run 'print(change.new)' after I just get an error reading: 'NameError: name 'change' is not defined', which tells me that outside of the dropdown code, "change" is not recognized.

How can I use my dropdown functionality to store both dropdown options as unique variables that can be used to to print unique strings in a subsequent print statement?

1 Answers1

2

The following code might help:

import ipywidgets as widgets
from ipywidgets import interactive

fruits = ['Banana', 'Apple','Lemon','Orange']
colors = ['Blue', 'Red', 'Yellow']

drop1 = widgets.Dropdown(options=fruits, value='Banana', description='Fruit:', disabled=False)
drop2 = widgets.Dropdown(options=colors, value='Blue', description='Color:', disabled=False)

def update_dropdown(fruit, color):
    info = f"I would love to try a {color.lower()} {fruit.lower()}!"
    display(info)  
        
w = interactive(update_dropdown, fruit=drop1, color=drop2) 
display(w)

As soon as you run the cell with the above code, you should see:

enter image description here

which then gets updated as per the choices made by the user.

medium-dimensional
  • 1,974
  • 10
  • 19
  • I have looked for the details on the argument `disabled` on [ipywidgets documentation](https://ipywidgets.readthedocs.io/en/stable/), which is important for explaining why this answer works, but have failed to do so. I would appreciate if someone could help with this. :) – medium-dimensional Dec 19 '22 at 12:45
  • This explanation is so clear and helpful, it works! Thank you! Do you perhaps know how I can insert a string between these two dropdown widgets? I am trying simple add the string: "Select a fruit!" right above the fruit dropdown and "Select a color!" right above the color dropdown, but cannot figure out where in the .interactive() line I would add this string. Simply adding a string between the `drop1` and `drop2` lines does not put the string in between the two dropdowns, it puts the string above both dropdowns. – LostinSpatialAnalysis Dec 19 '22 at 19:28
  • Thanks! Could you please post a new question related to adding titles over the dropdown separately? You could try it to achieve it using a `VBox`: see [The Flexbox layout in Layout of Jupyter Widgets](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Layout.html#The-Flexbox-layout). – medium-dimensional Dec 19 '22 at 20:24
  • 1
    Just posted here, thanks!: https://stackoverflow.com/questions/74856139/how-to-add-printed-string-between-dropdowns-using-ipywidget – LostinSpatialAnalysis Dec 19 '22 at 21:40