Select2 Dependent dropdown lists

Question

I am trying to use the Select2 plugin to have 4 dropdown lists that depend on each other. I have struggled to find the right way to update the data that loads the options in.

Answer 1

For Select2 v4.x, here is a small js class.

Using this, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box. And the dependency can be chained.

For example -

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''});
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});

Check the demo on codepen. Also here is a post on how to use it.