jQuery Based Custom Select UI Control - jSelect

jQuery Based Custom Select UI Control - jSelect

jSelect is a lightweight jQuery plugin for creating custom select UI controls that have the same behavior as an original HTML select box.

The goal of this plugin is to make the native select element fully customizable via your own CSS styles.

1. Load the stylesheet jSelect that provides the default styles of the select box.

<link href="css/jSelect.css" rel="stylesheet">

2. Load the main JavaScript jSelect.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="js/jSelect.js"></script>

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

<select name="colours" id="colours">
  <option disabled selected>Choose colour</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
  <option value="Orange">Orange</option>
  <option value="Yellow">Yellow</option>
  <option value="Blue">Blue</option>
  <option value="Pink">Pink</option>
  <option value="Purple">Purple</option>
  <option value="Black">Black</option>
  <option value="White">White</option>

4. Assign a unique ID to the select.

  id: "colours-jselect"

5. Add extra CSS classes to the select.

  cssClass: 'custom-class'

6. Define the placeholder text.

  placeholder: 'Please select an option'

7. Specify the number of options to display per page.

  size: 4 // default: 0

8. Enable/disable keyboard interactions.

  keyBoardInput: true // default: true

9. Set the preseleted value on init.

  value: 'Pink'

10. Enable/disable the select.

  disabled: false 

11. Execute a function when an option is selected.

  onChange: function (value) {
    // do something

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

  • Publication date: 12.08.2018
  • Source