How to assign Select2 value by dynamic by id in jQuery

Question

There is a select2 dropdown with these values

{
  "id": 9050020,
  "text": "Selected Folders",
  "keyword": "S"
}, {
  "id": 9050021,
  "text": "All Folders",
  "keyword": "A"
}

When I get the backend response for the Select2 value it comes as 'A'. then how do I set the select filed as 'All Folders'?

This is the select filled:

<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

The question is a bit unclear, you might ask for more as you actually mean. Perhaps https://stackoverflow.com/q/25187926/367456 is of help. — hakre, Jul 16 '21 at 14:16
You'll need to include more details, specifically regarding how you mung the `keyword` value into the `text` or how you *"get the backend response"* (what even is a "backend response for select2"?) As provided (assuming an array), select2 returns the data with id and text as expected: https://jsfiddle.net/w2uvo6zs/ — freedomn-m, Jul 16 '21 at 14:22
Maybe I've misunderstood - Do you load your select2 with those values then want to select the one that matches `A`? select2 *does* keep all the data you pass it: https://jsfiddle.net/w2uvo6zs/1/ — freedomn-m, Jul 16 '21 at 14:31
But it appears you can only get the original data for the *selected* value. So you can either keep a copy of the data as it's provided in your own variable and do a search through that, or loop through all the select options and set the select2 to active on each one, get its data, check, repeat. Better to keep a copy. — freedomn-m, Jul 16 '21 at 14:43

Mr. Polywhirl · Answer 1 · 2021-07-16T15:08:01.223

You can set the "All Folders" option by selecting it by its ID and triggering a change event.

See: "Selecting options"

var data = [{
  "id": 9050020,
  "text": "Selected Folders",
  "keyword": "S"
}, {
  "id": 9050021,
  "text": "All Folders",
  "keyword": "A"
}];

var $select = $('#foldertype').select2({ data: data }); // Convert

var found = data.find(function(entry) { return entry.keyword === 'A' });
if (found) {
  $select.val(found.id).trigger('change')
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

Here is a modified example using a jQuery plugin. Keep in mind that this does reference an external data source. It simply references the <option> child elements.

(function($) {
  $.fn.setSelection = function(value, isText) {
    var oldVal = this.val();
    if (isText) {
      this.find('option').filter(function() {
        return $(this).text() === value.trim();
      }).prop('selected', true);
    } else {
      this.val(value);
    }
    if (this.val() !== oldVal) {
      this.trigger('change');
    }
    return this;
  }
})(jQuery);

const data = [
  { "id": 9050020 , "text": "Selected Folders" , "keyword": "S" },
  { "id": 9050021 , "text": "All Folders"      , "keyword": "A" }
];

$('#foldertype').select2({ data }).setSelection('All Folders', true);

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

Or `var found = data.find(function(entry) { return entry.keyword === 'A' });` to match OPs specific requirement (as one possible interpretation of OPs requirement) — freedomn-m, Jul 16 '21 at 15:00

How to assign Select2 value by dynamic by id in jQuery

1 Answers1