@nikello/jquery-nice-select v1.2.0

jQuery Nice Select

A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.

Usage

Include jQuery and the plugin.

<script src="path/to/jquery.js"></script> 
<script src="path/to/jquery.nice-select.js"></script>

Include the plugin styles, either the compiled CSS...

<link rel="stylesheet" href="path/to/nice-select.css">

...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.

@import 'nice-select';

Finally, initialize the plugin.

$(document).ready(function() {
  $('select').niceSelect();
});

Usage with Vue.js

Require plugin in bootstrap.js or other root js script:

// ... code
try {
    window.$ = window.jQuery = require('jquery');
    
    require('jquery-nice-select');
    // .. load other plugin 
    require('bootstrap-sass');
} catch (e) {}

Then finally in your component you must define new directive:

<template>
    <select v-nice-select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option N</option>
    </select>
</template>

<script>
export default {
    directives: {
        niceSelect: {
            componentUpdated(el) {
                $(el).niceSelect();
            }
        }
    }
}
</script>

Full documentation and examples at hernansartorio.com/jquery-nice-select.