First8 staat voor vakmanschap. Al onze collega’s zijn een groot aanhanger van Open Source en in het bijzonder het Java-platform. Wij zijn gespecialiseerd in het pragmatisch ontwikkelen van bedrijfskritische Java toepassingen waarbij integratie van systemen, hoge eisen aan beveiliging en veel transacties een belangrijke rol spelen. Op deze pagina vind je onze blogs.

Searchable dropdowns with Select2 and Bootstrap

Select2 is a plugin for HTML dropdowns built with jQuery. Select2 makes it possible to search the options in the dropdown, which comes in handy when there are a lot of options in the dropdown. There is also support for Bootstrap available, so integration with Bootstrap works need as well.

select2_loaded_open

In order to add Select2 to your dropdown you need to include:

and add the classes ‘select2’ and ‘select2-hidden-accessible’.

HTML:

 

In JavaScript you can call the select2() function and pass in the options (see documentation for a list of options [3]):

 

The result of this will look like this:

select2_loaded_closed

 

select2_loaded_open

 

select2_loaded_search

 

To update the options: 

Here we are adding two options: purple and brown. Now after clicking the update button the result is:

select2_updated_open

 

select2_updated_search

 

 

 

It is also possible to use ajax calls with select2. To find out more about this, take a look at the documentation [5].   Read more

  1. https://select2.github.io/
  2. https://select2.github.io/examples.html
  3. https://select2.github.io/options.html
  4. https://fk.github.io/select2-bootstrap-css/
  5. https://select2.github.io/examples.html#data-ajax