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
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>
You can set Select2D.js options using the following data attributes:
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>
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();
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
};
Result