Combo box

A combo box is a drop-down list allowing you to choose one option from a list of options.

A WComboBox corresponds to an HTML <select> element.

Example
source 
#include <Wt/WComboBox.h>


auto cb = std::make_unique<Wt::WComboBox>();
cb->addItem("Heavy");   // 'Heavy' (index 0) is shown by default.
cb->addItem("Medium");
cb->addItem("Light");

WComboBox is a View widget (see also Model-View-Controller) which instantiates its own WStringListModel by default. You can use this widget also in conjunction with another model.

Events

You can capture the selected item and deal with it using a signal/slot mechanism.

Example
source 
#include <Wt/WComboBox.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WText.h>


auto container = std::make_unique<Wt::WContainerWidget>();

auto cb = container->addNew<Wt::WComboBox>();
cb->addItem("Heavy");
cb->addItem("Medium");
cb->addItem("Light");
cb->setCurrentIndex(1); // Show 'Medium' initially.
cb->setMargin(10, Wt::Side::Right);

auto out = container->addNew<Wt::WText>();
out->addStyleClass("help-block");

cb->changed().connect([=] {
    out->setText(Wt::WString("You selected {1}.")
                 .arg(cb->currentText()));
});

Top

Model

WComboBox is an MVC class (model-view-controller). By default a WStringListModel is used. With this model you can associate a single column of data to the displayed items. The member methods addItem(), insertItem() and removeItem() manipulate the model. You can set the model with setModel().

Item models support different roles like Wt::ItemDataRole::DisplayRole and Wt::ItemDataRole::UserRole. The text for an item in the drop-down box is associated with a Wt::ItemDataRole::DisplayRole. Typically, you will associate the underlying "value" with a Wt::ItemDataRole::UserRole). In this way, you can also add additional user roles.

Note that there are still other models like WFormModel which and can be used to represent fields in a form.

Example
source 
#include <Wt/WAny.h>
#include <Wt/WComboBox.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WStringListModel.h>
#include <Wt/WText.h>


auto container = std::make_unique<Wt::WContainerWidget>();

auto cb = container->addNew<Wt::WComboBox>();
cb->setMargin(10, Wt::Side::Right);

auto model = std::make_shared<Wt::WStringListModel>();
model->addString("Belgium");
model->setData(0, 0, std::string("BE"), Wt::ItemDataRole::User);
model->addString("Netherlands");
model->setData(1, 0, std::string("NL"), Wt::ItemDataRole::User);
model->addString("United Kingdom");
model->setData(2, 0, std::string("UK"), Wt::ItemDataRole::User);
model->addString("United States");
model->setData(3, 0, std::string("US"), Wt::ItemDataRole::User);
model->setFlags(3, Wt::ItemFlag::Selectable);

cb->setNoSelectionEnabled(true);
cb->setModel(model);

auto out = container->addNew<Wt::WText>();
out->addStyleClass("help-block");

cb->changed().connect([=] {
    Wt::WString countryName = cb->currentText();
    int row = cb->currentIndex();
    Wt::WString countryCode = Wt::asString(model->data(model->index(row,0), Wt::ItemDataRole::User));
    out->setText(Wt::WString("You selected {1} with key {2}.").
                 arg(countryName).arg(countryCode));
});

Top