Demos
Input
ComboBox
Objects
Chaining Combos

Chaining ComboBoxes

This sample demonstrates how to chain two ComboBoxex using filtering and binding.

The source for the first ComboBox is used to filter out options in the second ComboBox.

When you select a country from the first ComboBox below, the second will be filtered to show only cities in that country.

Learn about Input Controls | ComboBox API Reference

JavaScript
Angular
Vue
React
The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.js
index.html
data.js
styles.css
Copy to CodeMine
loading...
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as input from '@mescius/wijmo.input';
import { getCountries, getCities } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    // create country and city combos
    let cmbCountry = new input.ComboBox('#cmbCountry', {
        displayMemberPath: 'name',
        itemsSource: getCountries()
    });
    let cmbCity = new input.ComboBox('#cmbCity', {
        displayMemberPath: 'name',
        itemsSource: getCities()
    });
    // filter city view based on currently selected country
    cmbCity.collectionView.filter = (city) => {
        return city.country === cmbCountry.collectionView.currentItem.id;
    };
    cmbCountry.collectionView.currentChanged.addHandler(() => {
        cmbCity.collectionView.refresh(); // apply the filter
    });
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@mescius/wijmo.input'; import { getCountries, getCities } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create country and city combos let cmbCountry = new input.ComboBox('#cmbCountry', { displayMemberPath: 'name', itemsSource: getCountries() }); let cmbCity = new input.ComboBox('#cmbCity', { displayMemberPath: 'name', itemsSource: getCities() }); // filter city view based on currently selected country cmbCity.collectionView.filter = (city) => { return city.country === cmbCountry.collectionView.currentItem.id; }; cmbCountry.collectionView.currentChanged.addHandler(() => { cmbCity.collectionView.refresh(); // apply the filter }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Chaining Combos</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <main class="container-fluid"> <div id="cmbCountry"></div> <div id="cmbCity"></div> </main> </body> </html>
// export function getCountries() { return [ { id: 0, name: 'US' }, { id: 1, name: 'Germany' }, { id: 2, name: 'UK' }, { id: 3, name: 'Japan' }, { id: 4, name: 'Italy' }, { id: 5, name: 'Greece' } ]; } // export function getCities() { return [ { id: 0, country: 0, name: 'Washington' }, { id: 1, country: 0, name: 'Miami' }, { id: 2, country: 0, name: 'Seattle' }, { id: 3, country: 1, name: 'Bonn' }, { id: 4, country: 1, name: 'Munich' }, { id: 5, country: 1, name: 'Berlin' }, { id: 6, country: 2, name: 'London' }, { id: 7, country: 2, name: 'Oxford' }, { id: 8, country: 2, name: 'Manchester' }, { id: 9, country: 3, name: 'Tokyo' }, { id: 10, country: 3, name: 'Sendai' }, { id: 11, country: 3, name: 'Kobe' }, { id: 12, country: 4, name: 'Rome' }, { id: 13, country: 4, name: 'Florence' }, { id: 14, country: 4, name: 'Milan' }, { id: 15, country: 5, name: 'Athens' }, { id: 16, country: 5, name: 'Santorini' }, { id: 17, country: 5, name: 'Thebes' } ]; }
body { margin-bottom: 24px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);