What Should I Use to Make Custom Select Fields?

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.

‍