Bind MultiSelect listbox in Aurelia

Introduction

Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. A MultiSelect allows a user to select multiple values from a series of options. In this article, we will look into how to bind MultiSelect 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 MultiSelect dropdown

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 multiple 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 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 MultiSelect Dropdown and display ${country.CountryName} property as the value. We have set elect multiple value.bind to selectedCountryId which indicates that while we will select the item(s),selectedCountryId will be displayed. The result is as under

(B) Selecte both ID and Text from MultiSelect dropdown

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.selectedCountries= [];

    }  
}

The corresponding app.html will be changed to

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

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

  <select multiple value.bind="selectedCountries">
        <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:</p>
    <ol type="I">
    	<li repeat.for="selectedCountry of selectedCountries">${selectedCountry.CountryID} - ${selectedCountry.CountryName}</li>
  	</ol>
    
</template>

We are binding the selectedCountries property in the select

<select multiple value.bind="selectedCountries">

And we are binding the entire country object in the

option model.bind="country"

Ten we are loping through the selectedCountries property and displaying the result for the selectedCountry object chosen.

The result

Reference

Conclusion

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