Custom Dynamic Select Box Plugin - jQuery Select

Select.js is a tiny and easy-to-use jQuery plugin that dynamically renders a custom dropdown list to replace the native select box element.

Fully customizable via CSS. The selected option will be stored in a hidden input field. Disabled option is supported as well.

How to use it:

1. Load the select.css for the basic styling of the dropdown list.

<link href="select.css" rel="stylesheet">

2. Create an empty element to hold the dropdown list.

<div class="select-inner"></div>

3. Create a hidden input field to store the selected option value.

<input type="hidden" name="" value="">

4. Wrap them into a container element with the CSS class of select.

<div class="select" id="example">
  <input type="hidden" name="" value="">
  <div class="select-inner"></div>
</div>

5. Define an array of option objects containing names and values.

const myOptions = [{
        name:'jQuery',
        value:'jquery'
      },{
        name:'Script',
        value:'script'
      },{
        name:'Disabled',
        value:'disabled',
        disabled: true
      },{
        name:'Net',
        value:'net'
      },{
        name:'CSS',
        value:'css'
      },{
        name:'Com',
        value:'com'
      }
]

6. Initialize the plugin and define the data source. That's it.

$('#select_test').select({
  data: myOptions
});

7. All default CSS classes that can be used to style the dropdown list using your own CSS.

$('#example').select({
  data: myOptions,
  activeClass:'item-active',
  disabledClass:'select-disabled',
  itemDisabledClass:'item-disabled',
  openClass:'select-open'
});

8. Set the preselect option (zero indexed). Default: 0.

$('#example').select({
  data: myOptions,
  index: 1
});

9. Specify the space between toggle button and dropdown list.

$('#example').select({
  data: myOptions,
  gutter: 2
});

10. Callback functions available.

$('#example').select({
  data: myOptions,
  gutter: 2
});

11. API methods.

// disable/enable the dropdown
$('#example').select('disabled', boolean);

// get the selected option
$('#example').select('getName');

// get the selected option value
$('#example').select('getValue');

// select an option
$('#example').select('setSelect', index);

// update the data
$('#example').select('update', data);

---

This awesome jQuery plugin is developed by shulkme. For more Advanced Usages, please check the demo page or visit the official website.