Bind Dropdown in Aurelia

Introduction

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. A drop down allows a user to select a value from a series of options. In this article, we will look into how to bind a drop down in Aurelia.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Straight to Experiment

(A) Populate a drop down

At first, let us create a folder say dataSource under the src folder. Now let us create a countries-list.js file with the following content

countries-list.js
-----------------
export default [
  {
    "CountryID": "1",
    "CountryName": "India"
  },
  {
    "CountryID": "2",
    "CountryName": "USA"
  },
  {
    "CountryID": "3",
    "CountryName": "Canada"
  },
  {
    "CountryID": "4",
    "CountryName": "Sweden"
  }
];

As a second step, we need to first import the countries-list.js file as the data source for our application. For that reason, let us write the below code in our app.js file.

app.js
---------
import countries from './dataSource/countries-list';

export class App {
  
  constructor() {

    this.countryCollection = countries;
 
  }  
}

The program is very simple. At first, we are importing the countries-list.js file as the data source for our application by using the import statement and storing it into a variable countries. We have captured the countries value and assigned it to the countryCollection property inside the Constructor of the App class.

Now let's open the app.html file and write the below template

app.html
---------
<template>
<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>
  <select>
        <option value="">-Choose Country-</option>
        <option value="${country.CountryID}"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>
</template>

The purpose of Repeat.for is to iterate over objects. After we iterate the countryCollection array, we have bind the ${country.CountryID} property as the ID field of the Drop down and display ${country.CountryName} property as the value.The result is as under

(B) Choose Selected Id from drop down

In this case we are going to choose the selected id from the drop down. For this let us include a property say selectedCountryId and set it to null in app.js as under

app.js
------
import countries from './dataSource/countries-list';

export class App {
  
  constructor() {

    this.countryCollection = countries;

    this.selectedCountryId= null; 
  }  
}

The corresponding app.html will be changed to

app.html
----------
<template>
<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>
  <select value.bind="selectedCountryId">
        <option value="">-Choose Country-</option>
        <option value="${country.CountryID}"                
                repeat.for="country of countryCollection">${country.CountryName}</option>
    </select>
    <p>Selected Country Id: ${selectedCountryId}</p>
</template>

The result

(C) Select both ID and Text from drop down

This is a little tricky. First let us perform the change in the app.js as under

app.js
---------
import countries from './dataSource/countries-list';

export class App {

  constructor() {

    this.countryCollection = countries;

      this.selectedCountry= null; 

    }  
}

The corresponding app.html will be changed to

app.html
----------
<template> 

<h2><font color="green">Bind Dropdown in Aurelia - Example</font></h2>

  <select value.bind="selectedCountry">
        <option model.bind="null">-Choose Country-</option>
        <option model.bind="country"                
                repeat.for="country of countryCollection">${country.CountryID} - ${country.CountryName}
        </option>
    </select>
    
    <p>Selected Country: ${selectedCountry.CountryID} - ${selectedCountry.CountryName}</p>
</template>

We are binding the selectedCountry property in the select

<select value.bind="selectedCountry">

And we are binding the entire country object in the

option model.bind="country"

The result

Reference

Conclusion

In this article we have learnt the drop down filling and selected items from the same using Aurelia. Hope this will be useful. Thanks for reading. Zipped file attached.