Create your custom select.
How it works
This plugin use class pattern for manage each select as a singleton. The plugin create 2 div in the container you specified during the instantiation. The first one is the label who contains the selected value and the last one hold all the values.
You can use the minified file in lib/select.js for production or if you use
Browserify, you just have to
Simply create a new instance of the Select object with 2 mandatory arguments :
- select : selector of the select you want to fake
- container : selector of the container who the fakeselect will be append
var Select = ;document;
Obviously, each time you click on a list item, the select binded will have his selected value changed.
You can add a change event who will be triggered each time the value change. You need to pass a callback with the selected value as arguments.
var custom =select: '#custom'container: '.someWhereToAppend';custom;
What about device ?
By default, when the user will click on your fake select it will trigger the native select for a better UX. If you don't want this behavior you can disabled him in the constructor :
var selects =nativeOnDevice: false;
This module uses classList who isn't available on IE9 and below, so if you need the polyfill, you can use classList.js at the top of your file.