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>

Red Green Blue

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>

1 2 3 4 5 6 7 8 9 10 11 12

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

Select even options Select odd options Reset

Afghanistan Åland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia, Plurinational State of Bonaire, Sint Eustatius and Saba Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory Brunei Darussalam Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia