jQuery UI Helpers / Selectmenu

Introduction

You can create a selectmenu with the Selectmenu or SelectmenuFor helpers. A selectmenu always requires a set of items to display and this has to be a collection of SelectListItems. In the examples on this page the items are part of the viewmodel (Model.Continents).

@model SelectmenuModel
<div class="editor-field">
    @Html.JQueryUI().Selectmenu("continent", Model.Continents)
</div>

The result is the following selectmenu.

Configuration

Once a selectmenu is created it can be configured using the fluent configuration API. The next example shows how to set the width of the widget.

@model SelectmenuModel
<div class="editor-field">
    @Html.JQueryUI().Selectmenu("continent", Model.Continents).Width(400)
</div>

Default Option

Both Selectmenu and SelectmenuFor offer overloads that take an optionLabel parameter. This parameter can be used to add a default empty item to the list.

@model SelectmenuModel
<div class="editor-field">
    @Html.JQueryUI().Selectmenu("continent", Model.Continents, "--- Select a Continent ---").Width(400)
</div>

The generated widget looks like this.

SelectmenuFor

The SelectmenuFor creates a selectmenu for the property represented by the expression parameter. If this property has a value, the helper will make the list item that has the same value the selected item. In the following example the controller sets the value of SelectedContinentId to 5 (the vale of Europe in the list) before passing the model to the view.

@model SelectmenuModel
<div class="editor-field">
    @Html.JQueryUI().SelectmenuFor(m => m.SelectedContinentId, Model.Continents, "--- Select a Continent ---").Width(400)
</div>

As a result Europe is the selected item.

HTML Helpers

Fluent Configuration API