Select2 value or id selected

Question

I can't get the id or value of select2 to be selected $('.player-select').val(1).trigger('change');

https://jsfiddle.net/max1974/42cwa0vx/1/

Answer 1

You need to append the default option and set the value, prior to converting your <select> into a select2 jQuery object. This requires you to pre-fetch the data according to your desired ID.

 const api = 'https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/select2resp.json'; const defaultValue = '146545'; let preloadedRecord; $(() => { $.get({ url: api, dataType: 'json', cache: true, success: function(data) { preloadedRecord = data.find(({ Id }) => Id === defaultValue); prepareSelect(); } }); }); const createOptionFromData = ({ Id, FirstName, LastName }) => $('<option>').text(`${LastName}, ${FirstName}`).val(Id); const prepareSelect = () => { const $option = createOptionFromData(preloadedRecord); $('.player-select').append($option).val(preloadedRecord.Id).select2({ ajax: { url: api, dataType: 'json', delay: 250, data: (params) => ({ q: params.term }), processResults: (data, params) => ({ results: data.filter(value => value.LastName.indexOf(params.term) > -1).map(item => ({ text: `${item.LastName}, ${item.FirstName}`, id: item.Id, value: item.Id })) }), cache: true }, minimumInputLength: 1 }).trigger('change'); };

 .player-select { width: 200px; }

 <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.2/js/select2.full.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.css" rel="stylesheet" /> <select class="player-select form-control" multiple></select>

---

Edit

I have begun to simplify the code above, by utilizing more object destructuring and value short-hands.

 const cache = true, dataType = 'json', delay = 250, defaultValue = '146545', url = 'https://raw.githubusercontent.com/kshkrao3/JsonFileSample/master/select2resp.json'; let preloadedRecord; $.get({ url, dataType, cache, success: function(data) { preloadedRecord = data.find(({ Id }) => Id === defaultValue); prepareSelect(); } }); const createOptionFromData = ({ Id, FirstName, LastName }) => new Option(`${LastName}, ${FirstName}`, Id); const processResults = (data, params) => ({ results: data.filter(({ LastName }) => LastName.indexOf(params.term) > -1).map(({ Id, FirstName, LastName }) => ({ text: `${LastName}, ${FirstName}`, id: Id, value: Id })) }); const prepareSelect = () => { $('.player-select').append(createOptionFromData(preloadedRecord)).val(preloadedRecord.Id).select2({ ajax: { url, dataType, cache, delay, processResults, data: ({ term }) => ({ q: term }) }, minimumInputLength: 1 }).trigger('change'); };

 .player-select { width: 200px; }

 <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.2/js/select2.full.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.css" rel="stylesheet" /> <select class="player-select form-control" multiple></select>