0.0.10 • Published 6 years ago

multi-column-select v0.0.10

Weekly downloads
10
License
ISC
Repository
-
Last release
6 years ago
  • 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>
0.0.10

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago