How to Create a JavaScript Dropdown Control in Your Web Application

August 13 2025

Quick Start Guide
What You Will Need	Wijmo Visual Studio Code
Controls Referenced	Wijmo ComboBox Documentation HTML Content in ComboBox
Tutorial Concept	Build a sleek, customizable JavaScript dropdown control with Wijmo's JavaScript ComboBox, enhancing your web application’s interactivity, usability, and user experience in just a few steps.

Quick Start Guide

What You Will Need

Wijmo

Visual Studio Code

Controls Referenced

Tutorial Concept

Build a sleek, customizable JavaScript dropdown control with Wijmo's JavaScript ComboBox, enhancing your web application’s interactivity, usability, and user experience in just a few steps.

Dropdown controls are among the most common input components used when navigating the web, working with forms, and more. Many organizations use dropdown menus to allow their users to complete an online form accurately. They're used for choosing options, such as selecting your country and language or responding to a question with only a few possible responses.

Besides being a default HTML element through the <select> element, plenty of open-source and third-party dropdown controls are available online; which one should you choose?

Thankfully, Wijmo has you covered with ComboBox, the best available JavaScript dropdown control. It's simple to implement and easily customizable, with an extensive list of features that allow you to effortlessly integrate it into your other controls and components.

In this article, we'll outline the following features of the ComboBox:

Dropdown Implementation
Styling the ComboBox Control
Customizing the Dropdown Elements

Ready to check it out? Download Wijmo Today!

Dropdown Implementation

Before we implement Wijmo's JavaScript dropdown control, the ComboBox, we'll need to include all of Wijmo's required JavaScript and CSS for the control.

Inside our index.html file, we'll add the following imports:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wijmo ComboBox</title>
  <!-- Wijmo styles (required) --> 
  <link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> 
  <!-- Wijmo theme (optional) -->
  <link href="https://cdn.mescius.com/wijmo/5.latest/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
  <!-- Wijmo core javascript (required) -->
  <script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script> 
  <!-- Wijmo input controls --> 
  <script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
  <style>
    *, body {
      font-family: Helvetica;
    }
  </style>
</head>

Here, we're using Wijmo's CDN to import all of the required files as well as an optional file.

First, we're importing Wijmo's wijmo.min.css file, which includes all the required CSS styles for Wijmo controls. We're also importing wijmo.theme.modern.min.css, which is Wijmo's Modern theme. You can check out our documentation to see the available Wijmo themes.

Next, we're importing wijmo.min.js, Wijmo's core JavaScript file, and wijmo.input.min.js, Wijmo's JavaScript import for the library's input controls.

Then, we'll set up the JavaScript required to implement the ComboBox control:

<script>
  var data = ['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada'];
  var comboBox = new wijmo.input.ComboBox('#wijmo-dropdown', {
    itemsSource:data
  });
</script>

Now, we'll set up a basic array with some country names. We're initializing the ComboBox control, passing that data in as the itemsSource, and assigning this component to the element with an ID of wijmo-dropdown. We don't have one of those currently, so we'll go ahead and add that to the <body> tag of the file:

<div id="wijmo-dropdown"></div>

Now, if you run the application, you should see the ComboBox in action:

JavaScript ComboBox

As you can see, Wijmo's JavaScript dropdown neatly displays all our data. Next, we'll customize the look of the ComboBox.

Styling the ComboBox Control

Wijmo's ComboBox and all its other controls are highly customizable. For this sample, we will modify the dropdown to feature a dark-mode appearance.

.wj-control .wj-input-group .wj-form-control {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    font-weight: bold;
    padding: 10px 16px 8px;
    font-size: 16px;
}
 
.wj-control .wj-input-group .wj-input-group-btn {
    background: hsl(0, 0%, 15%);
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
    background: hsl(0, 0%, 30%);
    transition: .4s;
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
    color: hsl(0, 0%, 85%);
    transition: .4s;
}
 
.wj-combobox {
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
 
.wj-listbox-item {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
}
 
.wj-listbox-item.wj-state-selected {
    background: hsl(0, 0%, 30%);
}
 
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
    border-left: 1px solid hsl(0, 0%, 70%);
}
 
.combo-dropdown > .wj-listbox-item:hover {
    cursor: pointer;
    background: hsl(0, 0%, 30%) !important;
    transition: .3s;
  }
 
.wj-glyph-down {
    color: hsl(0, 0%, 70%);
}

There's a fair amount of code above. Still, all we're doing is modifying the size and color of the ComboBox and adding some updated colors when a user hovers over the various elements of the control.

When we run the application, we'll see the following:

Styled JavaScript ComboBox

Customizing the Dropdown Elements

Now, loading an array is pretty basic. In most scenarios, it won't be an array of strings but an array of objects you'll receive. The nice thing about this, however, is that ComboBox makes it easy to bind to objects and select which property of the object you want to bind to.

The first thing that we'll need to do is update our data. Instead of an array of strings, we're now going to set it up to be an array of objects, which will include the country name, sales, and expenses:

var data = [
  {
    country: 'US',
    sales: 8817,
    expenses: 4620
  }, {
    country: 'UK',
    sales: 5692,
    expenses: 3475
  }, {
    country: 'China',
    sales: 9184,
    expenses: 7214
  }, {
    country: 'Russia',
    sales: 3810,
    expenses: 2749
  }, {
    country: 'Germany',
    sales: 5693,
    expenses: 3267
  }, {
    country: 'India',
    sales: 7938,
    expenses: 5173
  }, {
    country: 'Italy',
    sales: 4197,
    expenses: 2972
  }, {
    country: 'Canada',
    sales: 5789,
    expenses: 3206
  }
];

Now, this is going to cause a problem at first. If you make these changes and run the application, you'll notice that the ComboBox doesn't display the data as expected:

Customized JavaScript ComboBox

As you can see, it now knows that we're passing it an array of objects to display, but it doesn't know what of that object we want to show. So, we're going to make another small change to the ComboBox component we're creating:

var comboBox = new wijmo.input.ComboBox('#wijmo-dropdown', {
  itemsSource: data,
  displayMemberPath: 'country',
  headerPath: 'country'
});

We're doing two things now. First, displayMemberPath will allow us to set the property value from the object that we want to display; in this case, country. Second, we're setting the headerPath property to country as well. The headerPath property is used to decouple the value displayed in the dropdown from the value selected from the dropdown. This is used if we want to display some additional information in the dropdown menu, which we'll explore next:

var template = '<div class="item">' +
  '<div class="itemHeader"><b>{country}</b></div>' +
  'Sales: <b>${sales}</b><br>' +
  'Expenses: <b>${expenses}</b>';

Now, we're creating a variable called template and using that to hold the HTML template that we'll use to replace the contents of the dropdown. We're also referencing the sales and expenses properties of our data.

Next, we need to get this template into the dropdown control, which we can do using the ComboBox's formatItem method:

var comboBox = new wijmo.input.ComboBox('#wijmo-dropdown', {
  itemsSource: data,
  displayMemberPath: 'country',
  headerPath: 'country',
  formatItem: (sender, e) => {
    let html = wijmo.format(template, e.data, (data, country, fmt, val) => {
      return wijmo.isString(data[country]) ? wijmo.escapeHtml(data[country]) : val;
    });
    e.item.innerHTML = html;
  }
});

All that the formatItem method is doing is validating that the data we have within the data set is valid compared to what we're referencing. If it is valid, the existing HTML will be swapped out with our custom template HTML.

Now, whenever you save and view the ComboBox, you should see the following:

Final ComboBox

Ready to try it out? Download Wijmo Today!

Conclusion

As you can see, building a very powerful and versatile JavaScript dropdown with Wijmo's ComboBox is simple. This article only scratches the surface of what you can do with the ComboBox. If you'd like more information, explore our demos, documentation, and API references or check out the video below: