Chaining multiple Select2 together

Question

Trying to make two chained auto populating select fields using select2 plugin The first select contains countries names(static select) and the second shows the states of the

Answer 1

A Select2 can be chained in the same way that a standard can be chained. So that means that when the value of the first select is chained, the second select is reset (generally to a placeholder) and the options generally change as well.

You have two options for how this can be done with Select2:

1. Pre-load the options for the second

when the value changes, and let Select2 handle searching locally. This would be similar to how you are currently trying to do it, but may suffer from issues when there are a large number of options that can be selected in the second .

In your case, there shouldn't be thousands of "states" (for whatever degree of state) within a country, so local searching shouldn't be too much of an issue.

Use Select2's AJAX functionality and pass in a different parameter as the url to use based on the value of the first

. This requires that you have a dynamic endpoint that can handle retrieving the items for the second select as well as filtering them when searching, so it's not always feasible.

If you already have an endpoint like this that supports filtering, this is a more responsive option as the user doesn't have to necessarily wait for all options to be retrieved before they can select an option from the second .

What option you choose largely depends on what you already have set up, the size of the data set that you are working with (Select2 does not handle well with thousands of options), and the user experience you want to provide.

The code for the first option would be similar to

$("#first").select2({
  placeholder: 'Select a number range'
});

$("#second").select2({
  placeholder: 'Select a number'
});

$("#first").on("change", function () {
  $("#second option[value]").remove();
  
  var newOptions = []; // the result of your JSON request

  $("#second").append(newOptions).val("").trigger("change");
});

And can be tested at the following jsbin, using ranges of numbers instead of countries and states: http://jsbin.com/wigalivapi/1/edit?html,output

Note that while this is similar to the code you were using, there are a few small difference that would have caught you.

1. You are setting dataType: "html" when you are really expecting dataType: "json". You are returning JSON in your response, not HTML.

2. You are not clearing your

before you call .select2({data:[]}) a second time. Select2 doesn't automatically remove the tags it generates with data, so you need to do that on your own.