ComboBox

The ComboBox combines an input element with a drop-down list. You can use it to select and/or edit strings or objects from lists.

The ComboBox provides as-you-type auto-completion, making it easy to find items in long lists.

For example, the combo boxes below allow you to select from lists of strings and objects:

Strings:

The current value is: China.

Objects:

The current value is: China (sales: $72,624, expenses $40,866).

// This file locates: "Scripts/Lesson/C1Input/ComboBox.js".
c1.documentReady(function () {
    var theComboString = wijmo.Control.getControl('#theComboString');
    var theComboObject = wijmo.Control.getControl('#theComboObject');
 
    // select a country (string)
    theComboString.selectedIndexChanged.addHandler(function (s, e) {
        showSelectedString(s);
    });
 
    // select an item (object)
    theComboObject.selectedIndexChanged.addHandler(function (s, e) {
        showSelectedObject(s);
    });
 
    showSelectedString(theComboString);
    showSelectedObject(theComboObject);
 
    function showSelectedString(s) {
        setText('theComboStringCurrent', s.text);
    }
 
    function showSelectedObject(s) {
        var text = wijmo.format('{Country} (sales: {Sales:c0}, expenses {Expenses:c0})', s.selectedValue);
        setText('theComboObjectCurrent', text);
    }
 
    // show text in an element on the page
    function setText(id, value) {
        document.getElementById(id).textContent = value;
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: ComboBox
        public ActionResult ComboBox()
        {
            ViewBag.Countries = Models.InputData.GetCountries();
            return View(Models.InputData.GetSales());
        }
    }
}

@model IEnumerable<InputData.Sale>
 
@{ 
    IEnumerable<string> countries = ViewBag.Countries;
}
 
<h1>
    @Html.Raw(Resources.C1Input.ComboBox_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.ComboBox_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.ComboBox_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Input.ComboBox_Text3)
</p>
<label for="theComboString">@Html.Raw(Resources.C1Input.ComboBox_Text4)</label>
@Html.C1().ComboBox().Id("theComboString").Bind(countries)
<p>
    @Html.Raw(Resources.C1Input.ComboBox_Text5)
</p>
<label for="theComboObject">@Html.Raw(Resources.C1Input.ComboBox_Text6)</label>
@(Html.C1().ComboBox<InputData.Sale>().Id("theComboObject").Bind(Model).DisplayMemberPath("Country"))
<p>
    @Html.Raw(Resources.C1Input.ComboBox_Text7)
</p>