Python Tkinter section

Use the ComboBox to display Data

The Combobox in Pyhton tkinter, how does it look like?
Post by Amina Delali, January 23th, 2023

Description

The ComboBox widget in Python tkinter, is a dropdown list TTK widget, from where the user can select an element and display it as the value of that dropdown list.
So the ComboBox looks like the Entry widget with a button. When the user click on that button, a list of values (a listbox) will be populated below that entry. When the user click on one element of that list, the corresponding value will be displayed on the entry of that combobox.

How does a combobox in python tkinter look like ? - png preview picture

To create a ComboBox, we will call the ComboBox constructor with the usual widgets parameters, but we can add to it the values that will be displayed in the populated list of that combobox. The values will represent the data or part of it, that you want the user to interact with.

How to create combobox in python tkinter with a list of values? - code picture png

The data that we will display is the list of titles of the episodes of the TV Show: The Last of Us. This data was recuperated from this TV guide. The actual titles will not be displayed all at once. The user will have to click on the Combobox, select an episode number. And when he is done, the corresponding title will be displayed on a label widget.

The data; the titles of the "last of us" episodes with their corresponding numbers, was coded using an Enumeration class. So we defined a sub class of the class Enum, and we defined 9 members corresponding to the the number of the 9 episodes:

  • The names: are composed by the concatenation of the word "EPISODE, and the number of that episode (ex: EPISODE1, EPISODE2, EPISODE3, ...)
  • The values: each name will be associated with a value. That value will be the actual title of that episode name. For example (EPISODE2="Infected")
How to define an enumeration in python with strings as values? - code picture png

We will convert the names in that enumeration into a list by using a for loop. We will loop through the created enumeration Class, and for each element, we will add the corresponding name to a previously empty list. We will use that list as the values of our ComboBox

how to convert [the names of] an enumeration to a list with python?- code picture png

After creating the combobox, we will assign a callback function to the action of the selection of an item from that combobox by calling its bind method. It will have 2 parameters:

  • The first parameter: will be "<<ComboboxSelected>>".
  • The second parameter: will be name of the function to call. In our case, the function is: changeTitle.
how to assign a callback function to the selection of an item of the combobox?- code picture png

The function changeTitle will get the value selected using the get method of the combobox. It will be the name of one of the members of the created enumeration.
Using the name, we will access the associated value from the enumeration itself. The value will be a string that will be assigned to the text property of the label used to display the titles: titLabel. The string value will be assigned using the configure method. All that code can be written in one statement.

how to change the value of a label from a combobox value using and enumeration?- code picture png



The Code

from tkinter import *
from enum import Enum
from tkinter import ttk


main_window=Tk()
main_window.title("Last Of Us Episodes - Season 1 ")
main_window.geometry('500x250+400+100') 
main_window.configure(bg="purple")

class Titles(Enum):
    EPISODE1="When You're Lost in the Darkness"
    EPISODE2="Infected"
    EPISODE3="Long Long Time"
    EPISODE4="Please Hold My Hand"
    EPISODE5="Endure and Survive"
    EPISODE6="Kin"
    EPISODE7="Left Behind"
    EPISODE8="When We Are in Need"
    EPISODE9="Episode 9"

myTitles=[]
for title in Titles:
    myTitles.append(title.name)
  
label = Label(main_window, text="The Last of Us Episodes Titles",
                fg="gold",bg="purple",
                font=("Tahoma",16,"bold"))
label.pack(pady=5)                

titLabel = Label(main_window,text="",
                bg="purple",fg="white",
                font=("Thoma",16,"bold"))
titLabel.pack(pady=60,side="bottom",anchor=CENTER) 


def changeTitle(event):
    titLabel.configure(text=Titles[myComboBox.get()].value)
    pass    

myComboBox= ttk.Combobox(main_window, width=30 ,height= 10 ,
                        values=myTitles)
myComboBox.bind("<<ComboboxSelected>>", changeTitle)
myComboBox.pack(padx=10,pady=20,side="left", anchor="nw")
main_window.mainloop()



The Output



Something to say ?

If you want to add something about this post, please feel free to do it by commenting below 🙂.