Select box

JointJS+ provides a SelectBox plugin that enables the ability to display dropdowns.

Items in the dropdown can contain arbitrary HTML. Because items in dropdowns often contain images, ui.SelectBox provides an easy way to add icons to your dropdown items. The ui.SelectBox also provides different open policies and support for keyboard navigation.

Installation

Import the SelectBox from the ui namespace and create a new instance of it.

import { ui } from '@joint/plus';

const selectBox = new ui.SelectBox({
    width: 200,
    options: [
        { content: 'Amsterdam' },
        { content: 'Prague', selected: true },
        { content: 'London' },
        { content: 'San Francisco' },
        { content: 'New York' }
    ]
});

document.getElementById('selectbox-holder').appendChild(selectBox.render().el);

There is also a UMD version available

Include joint.ui.selectBox.js and joint.ui.selectBox.css files to your HTML:

index.html

<link href="joint.ui.selectBox.css" rel="stylesheet" type="text/css">
<script src="joint.js"></script>
<script src="joint.ui.selectBox.js"></script>

And access the SelectBox through the joint.ui namespace:

index.js

const selectBox = new joint.ui.SelectBox({
    width: 200,
    options: [
        { content: 'Amsterdam' },
        { content: 'Prague', selected: true },
        { content: 'London' },
        { content: 'San Francisco' },
        { content: 'New York' }
    ]
});

document.getElementById('selectbox-holder').appendChild(selectBox.render().el);

How does SelectBox work?

Create an object of ui.SelectBox type, render it with the render() method and append the generated HTML element anywhere in your DOM.

Please see the demo for reference on how to do that if you're in doubts:

Open Sandbox

ui.SelectBox with icons

Open Sandbox

var selectBox = new joint.ui.SelectBox({
        width: 250,
        options: [
            { icon: '/path/to/some-image.png', content: 'Some text content', selected: true },
            { icon: '/path/to/some-other-image.png', content: 'Some other text' }
        ]
    });

    document.body.appendChild(selectBox.render().el);