Select2D.js

Select2D.js is a javascript package which transforms HTML <select> controls to tables.

Supports multi-select using Ctrl, Shift and click-and-drag for select boxes with multiple selection enabled.

Select2D.js uses Event.js as a cross-browser event handling wrapper, which is available at Github and JSClasses.org

Works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10.

Licensed under the MIT License, © 2014 Mark Rolich

Source code is available at Github

Usage

Include css and js files:

<link rel="stylesheet" type="text/css" href="select2d.min.css">
<script type="text/javascript" src="Event.js"></script>
<script type="text/javascript" src="Select2D.min.js"></script>

Initialize Select2D.js passing reference to select as an argument:

<script type="text/javascript">
var evt = new Event(),
    myselect = new Select2D(evt, document.getElementById('myselect'));
</script>

Options

You can set Select2D.js options using the following data attributes:

• data-x | int - number of table columns
• data-y | int - number of table rows
• data-debug | bool - by default source select element is hidden, using this you can prevent Select2D.js from hiding it

Select2D.js on a regular select:

<select id="regular" data-x="3" data-y="1">
    <option value="red">Red</option>
    <option value="green" selected>Green</option>
    <option value="blue">Blue</option>
</select>

Select2D.js on a multiple select with debug:

<select id="multi-debug" data-x="5" data-y="3" data-debug="true" size="30" multiple>
    <option value="0" selected>1</option>
    <option value="1">2</option>
    <option value="2" selected>3</option>
    ...
</select>

Methods

Select2D.js supports the following methods:

selectByIndex

Select options taking an index (integer) or an array of indexes as an argument:

var evt = new Event(),
    select = new Select2D(evt, document.getElementById('select'));

select.selectByIndex(2);
select.selectByIndex([1, 3, 5]);

selectByValue

Select option using its value:

select.selectByValue('red');

selectByText

Select option by its text value:

select.selectByText('Red');

getSelected

Get selected options:

indexes:

select.getSelected('idx');

values:

select.getSelected('val');

text values:

select.getSelected('txt');

getSelected returns array for multiple selects and single value for regular ones

reset

Deselect all options:

select.reset();

Events

Select2D.js fires 3 events on option change: changeIdx, changeVal and changeTxt, returning array of indexes, array of values, and array of text values (each function returns single value for regular select)

select.changeIdx = function (indexes) {
    // do something
};

select.changeVal = function (values) {
    // do something
};

select.changeTxt = function (textValues) {
    // do something
};

Full example