Customize the select element with jQuery Nice Select

jQuery Nice Select is a lightweight jQuery plugin that is the simple replacement for the native select element.

This quickly adds styling on the select element. It works well on both mobile and desktop browsers.

There are not many options and methods are available in this plugin.

Download and Include
Initialize
Customize
Methods
Conclusion

1. Download and Include

Download the library from GitHub.
Include nice-select.css and jquery.nice-select.min.js script with the jQuery library.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-nice-select/js/jquery.nice-select.min.js"></script>

2. Initialize

Create a <select > element with some options.
Now call the niceSelect() method on the select element.

$( selector ).niceSelect();

Example

<select id='seluser' >
 <option value='0'>-- Select user --</option>
 <option value='1'>Yogesh</option>
 <option value='2'>Sonarika</option>
 <option value='3'>Vishal</option>
 <option value='4'>Vijay</option>
 <option value='5'>Ravi</option>
 <option value='6'>Anil</option>
</select>
 
<!-- Script -->
<script type='text/javascript'>
 
$(document).ready(function(){
 
  $('#seluser').niceSelect();
 
});
</script>

Output

3. Customize

Display alternate Text

With data-display set the alternate text for the <option> that visible when an <option> is get selected.

<select >
  <option data-display='Select user'>-- Select --</option>
  <option value ='1' data-display='Yogesh singh'>Yogesh</option>
  <option value ='2' >Sonarika</option>
</select>

Custom class

There are 3 classes available – wide, right, small.

<select class='wide' ></select>

Example

In the example, I used class='small' and defined the data-display attribute on the 3 option with different values.

<select id='seluser' class='small'>
  <option value='0' data-display="Select" >-- Select user --</option>
  <option value='1' data-display="Yogesh singh">Yogesh</option>
  <option value='2' data-display="Sonarika bhadoria">Sonarika</option>
  <option value='3'>Vishal</option>
  <option value='4'>Vijay</option>
  <option value='5'>Ravi</option>
  <option value='6'>Anil</option>
</select>

<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
 
  $('#seluser').niceSelect();

});
</script>

Output

4. Methods

There are two methods –

update – This method updates the view of nice select when any change made on the <select > element.

$('select').niceSelect('update');

destroy – Remove all customization and unbind all events from the <select>.

$('select').niceSelect('destroy');

Example

Here, I created a <select > element and 3 buttons to initialize, destroy, and update the nice select.

<select id='seluser' >
  <option value='0'>-- Select user --</option>
  <option value='1'>Yogesh</option>
  <option value='2'>Sonarika</option>
  <option value='3'>Vishal</option>
  <option value='4'>Vijay</option>
  <option value='5'>Ravi</option>
  <option value='6'>Anil</option>
</select>

<br/><br/>

<div style='clear: both; '>
  <input type='button' value='Enable nice select' id='enable' />
  <input type='button' value='Destroy' id='destroy' />
  <input type='button' value='Update' id='update' />
</div>
 
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function(){
 
  // Initialize
  $('#enable').click(function(){
     $('#seluser').niceSelect();
  });
 
  // Destroy
  $('#destroy').click(function(){
     $('#seluser').niceSelect('destroy'); 
  });

  // Update
  $('#update').click(function(){
     $('#seluser').val(3);
     $('#seluser').niceSelect('update'); 
  });
});
</script>

Output

5. Conclusion

If you would like to quickly add styling to the select elements without much effort then you can use it on your project otherwise use any other plugins for more customization like – select2, chosen, Selectize, etc.

If you found this tutorial helpful then don't forget to share.

Contents

1. Download and Include

2. Initialize

3. Customize

4. Methods

5. Conclusion