0.0.10 • Published 6 years ago
multi-column-select v0.0.10
- Now works with Multiple Selects
- Added option to hide select
- Detects options selected on init.
Or Install via npm:
npm multi-column-select --save
<link href="multi-column-select.css" rel="stylesheet">
<script type="text/javascript" src="multiColumnSelect.min.js"></script>
Call the script
var mcs = new multiColumnSelect({
selector: '.mcs',
container: 'mcs-container',
init: false,
hideSelect: false,
onClick: function(index, value) {},
});
//use options.init: false to manually start the component.
mcs.init();
mcs.destroy();
let mutiColumnSelect = require('multi-column-select');
let Msc = new mutiColumnSelect.default(options);
Mcs.init(options);
import mutiColumnSelect from 'multi-column-select';
var Mcs = new mutiColumnSelect(options);
Mcs.init(options);
Wrap Select control in div/span with a class name.
<div class="mcs">
<select...>
<options...>
</select>
</div>
//generated html
<div class="mcs-container">
<a href="Audi" data-value="Audi" data-index="0">Audi</a>
<a href="Bugatti" data-value="Bugatti" data-index="1">Bugatti</a>
<a href="Chrysler" data-value="Chrysler" data-index="2">Chrysler</a>
<a href="Daihatsu" data-value="Daihatsu" data-index="3">Daihatsu</a>
<a href="Ford" data-value="Ford" data-index="4">Ford</a>
<a href="GM" data-value="GM" data-index="5">General Motors</a>
<a href="Honda" data-value="Honda" data-index="6">Honda</a>
<a href="Infiniti" data-value="Infiniti" data-index="7">Infiniti</a>
</div>