Creating Custom Select Options With jQuery - custom-select

custom-select is a jQuery plugin which converts the normal select element into an accordion-style dropdown list with custom markups for better styling & SEO.

How to use it:

1. Load the stylesheet custom-select.css in the document that provides the default styles for the dropdown list.

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

2. Load the necessary jQuery library and custom-select plugin's script at the end of the document.

<!-- Necessary jQuery instance file -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Custom select script file -->
<script src="custom-select.min.js"></script>

3. Just call the function on the existing select element and done.

<select class="demo">
  <option value="select1-value1">Select one - Value 1</option>
  <option value="select1-value2">Select one - Value 2</option>
  <option value="select1-value3">Select one - Value 3</option>
</select>

$('.demo').customSelect();

4. Set the element type to receive the default text (a, div, p, h).

$('.demo').customSelect({
  defaultElement: 'p'
});

5. Set the default text to display in the select element.

$('.demo').customSelect({
  defaultText: '-'
});

6. Decide whether to submit form when select option is selected.

$('.demo').customSelect({
  autoFormSubmit: false
});

7. Default CSS selectors.

$('.demo').customSelect({

  // Class to wrapper all the custom select elements.
  classContainer: '.custom-select-container',

  // Class to define current selected option text.
  classCurrent: '.custom-select-current',

  // Class to list of select options.
  classOptions: '.custom-select-options'

});

8. Specify the animation speed.

$('.demo').customSelect({
  animationSpeed: 100
});

Change log:

2017-12-05

• Custom select to selected items

2017-11-07

• Improve function finder

2017-09-29

• Improve function finder

2017-09-28

• Add animation time control feature

---

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