Combo boxes and list boxes

Combo boxes are also known as drop down boxes. They are similar to the behavior of radio buttons because they allow user to select only one option from many. When there are many options to select from, using combo boxes and group boxes is easy, such as whey you have to select your country from a list of countries.

Combo boxes

Let us first see how to use combo boxes.

This application will give you a message telling which country you selected when you select a country from the combo box.

First, drag a combo box to the dialog from Toolbox and make the dialog look like the above. Remember to drag down the combo box to the extent you want it to drop down when down arrow is clicked.

Then, you need to add the list of countries to the combo box. To do that, go to properties of the combo box and enter the list of countries in the "Data" property. Use semicolons to separate the countries. e.g.: "USA;UK;Australia"

Now, you have to add a variable to the combo box. You can add a CString variable which will get the country selected by the user. But, this time we use a different method. Right click the combo box and select Add Variable. This time, in the category field, keep the default setting, "control". The variable type is CComboBox. Give a suitable name to the variable such as countrycombo.

In our previous examples, we had a button and after user clicks it, we gave the message. This time its different. After the user has changed the selection of the combo box, we have to give the message. So, we have to capture the event of selecting a new item in the combo box. To do that, open properties of the dialog box and click control events symbol in the top (). Then, add the function for CBN_SELCHANGE event message, which should be OnCbnSelChangeCombo1. This function is called each time the user selects a new item in our combo box. Add the following code in that function.

void CcomboDlg::OnCbnSelchangeCombo1()
{
CString country;countrycombo.GetLBText(countrycombo.GetCurSel(), country.GetBuffer(32));country.ReleaseBuffer();MessageBox(country);}

Here, countrycombo is the variable we assigned to our combo box. We have called the function GetLBText to get the current selection in the combo box. The first argument to it is the index of the item we need to get. GetCurSel() gives us the index of the current selection, so we can give it as the index to GetLBText() and get the text of the current selection. The second argument to GetLBText() is a buffer where it put the text of item we specified by first argument. We have sent the buffer of a CString for that. You can read CString section for more information.

You may think assigning a CString variable directly to the combo box and taking the current selection of the combo box via it is easier. True. But if you use that method, though you call UpdateData(TRUE ) in the top of above function, the CString variable you assigned will still not be updated to the latest selection of the combo box.

Now you should be able to compile the program and see results. But, you can notice that when you run the program, no item is selected as you can see in the first image in this page. So you need to select some item when the window is initialized. To do that, you can scroll upwards in the file where the above OnCbnSelchangeCombo1() function is placed. You will find a function OnInitDialog(). This function is called when the window is being initialized, so you can add any extra initialization you need. Place the following line just before the return statement of that function.

countrycombo.SetCurSel(0);

Above statement sets current selection of the combo box to the item with index 0 (first item). Now, if you compile and run the application again, you can see that the first item is selected in the combo box at the beginning.

Download the source code.

List boxes

The functionality of a list box is similar to a combo box, but unlike in combo boxes, you can select multiple items at once in some list boxes. The following application shows you how to use a list box.

Drag a list box to the dialog. Go to the properties of the dialog and set the value of "selection" to multiple or extended. This allows you to select multiple items at once in the list box. Then add a variable to the list box. The "category" should be kept in the default setting, control. The variable type is CListBox. Give the name "fruitlist" to the variable.

Then put necessary controls and make your dialog look like this.

Add a CString variable to the text field you added named "fruit". The category should be "value".

Now, lets add some fruits to our list box. We need to have some fruits when we start the dialog. So, like we did with combo box, we shall add them in OnInitDialog() function. Add the Following code just before the return statement.

fruitlist.AddString(TEXT("mango"));
fruitlist.AddString(TEXT("apple"));
fruitlist.AddString(TEXT("banana"));
fruitlist.AddString(TEXT("grapes"));
fruitlist.AddString(TEXT("lemon"));

It should be clear to you what we are doing. We are adding our list box "fruitlist" some fruits as strings. Now, if you compile the project and run, you will be able to see the list box with the fruits we added in it.

Double click the button "add fruit" and put the following code in the function.

void ClistboxDlg::OnBnClickedButton2()
{
UpdateData(TRUE);fruitlist.AddString(fruit);}

Here, we call UpdateData(TRUE) so, the value user enters in the text field comes to our variable "fruit". We just add that string to our list box in the second line.

Now, lets see how we can get the user s selections into our code. Remember, the user can select multiple items in this list box because we set selection property to multiple or extended. So, we need to get all the selected items to our code. Double click Show selection button and add the following code there.

void ClistboxDlg::OnBnClickedButton1()
{
int selectedlist[10];int count;CString message, temp;message=TEXT("");
count=fruitlist.GetSelItems(10, selectedlist);for(int i=0; i{fruitlist.GetText(selectedlist[i], temp.GetBuffer(32));temp.ReleaseBuffer();message.Append(temp);message.Append(TEXT(", "));}MessageBox(message);}

Here, using the function GetSelItems(), we can get all the selected item indexes to the integer array we send as the second argument. The first argument should be the size of the array we send. This function returns the number of items the user has selected and we put this value to our variable "count".

Then, we go in a loop for number of times equal to the number of items selected by the user. In each iteration in the loop, we append a fruit name to the CString "message". The function GetText() puts the string at the index we specify by the first argument to the buffer we give as the second argument. As our array "selectedlist" contains the indexes of the selected items, we can get the each selected item text to the string "temp" in each iteration. We append all the item text to the string "message" also append a coma to separate each item. Finally, we give a message box with all selected items.

Download the source code.