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.

My goal is to load the new data via ajax, but once I have it in the client I am unable to add the new data to the select list.

The code I have tried is here:

$(#"a3").select2({
    placeholder: "select an item",
    allowClear: true}).on("change",
    function (e) {
         var results = $.get("url?id=2",
            function (data, textStatus, jqXHR) {
                $(this).select2({ data: { results: data, text: "Name" } });
        });
    }
); 

There is another question here select2 changing items dynamically but the solution there worked with Select2 v3.2 but not Select2 v3.3

Ocker

Answer 1

Igor has come back to me with a way to do this

var data=[...];    
$().select2({data: function() {return {results:data};}});    
/// later    
data=[...something else];    
// next query select2 will use 'something else' data

Ocker

Awesome, I've been searching for this. Calling the select2({...}) over and over again (because Knockout) was causing me massive memory leaks in some browsers. Just a caveat to what you wrote: Select2 will throw an error if you try to just return the data. You need to return an object where the data is in the results index. So: return {results: data} – Unmask

Could you please post a full example of your code? I also need to get dependent dropdown working with select2 – Intumesce

This does not work for me, the callback is never called (Select2 v4) – Gytle

Answer 2

The correct format is:

.select2("data", {...})

Stacee

Thanks Igor, I found that using that method it tried to select an item in the dropdown based on the data I passed in. – Ocker

Answer 3

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.

Oquendo

Answer 4

Here's a way to do it without Ajax. You can view a working example on codepen.

$(document).ready(function() {
  $('#groups').select2({
    placeholder: "Choose Group",
    width: '300px',
  });
  $('#items').select2({
    placeholder: "Choose Item",
    width: '300px',
  });
});
  
$('#groups').on('select2:select', function(event) {
  let group = event.params.data.id;
  $('#items').html('<option></option');
  $('#item-options option').each(function() {
    if ($(this).hasClass(group)) {
      let option = $(this).clone();
      $('#items').append(option[0]);
    }
  })
});

body {
  font-family: sans-serif;
  width: 730px;
  margin: 20px auto;
}

.select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  margin: 40px auto;
}

.select2-container {
  margin: 10px;
}

.hidden {
  display: none;
}

<div class="select">
  <select id="groups">
    <option></option>
    <option value="1">Group 1</option>
    <option value="2">Group 2</option>
  </select>
  <select id="items">
  </select>
</div>

<div id="item-options" class="hidden">
  <option class="1" value="A">Group 1: Item A</option>
  <option class="1" value="B">Group 1: Item B</option>
  <option class="1" value="C">Group 1: Item C</option>
  <option class="2" value="R">Group 2: Item R</option>
  <option class="2" value="S">Group 2: Item S</option>
</div>

https://codepen.io/lflier/pen/xxWXwpg

Permissive