What Should I Use to Make Custom Select Fields?

May 5, 2017

If you’re looking for a way to customize your select fields, I would recommend Select2.js. Select2 allows you to easily style the select field itself as well as the dropdown list below.

Some of the options I’ve used include:

1. Setting the dropdown parent (so the html select2 creates doesn’t end up in your footer)

$('#mmHeaderSearch select').select2({
      dropdownParent: $('#mmHeaderSearch')
});

2. Using an on change event (you do have to include .select2() before using the on change)

$('header .locationAddressSelector').select2().on("change", function(e) {
      $('header .addresses .address[data-address="'+addressID+'"]').addClass('active');
});

Select2 has many other cool features, such as “support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.”

Check out some examples of how you can be more flexible with your select fields here.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive