Select2 值或 id 已选择

Question

我无法选择 select2 的 id 或值$('.player-select').val(1).trigger('change');

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

Answer 1

在将<select>转换为 select2 jQuery object 之前，您需要将 append 设置为默认选项并设置值。 这需要您根据所需的 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>

---

编辑

我已经开始简化上面的代码，通过使用更多的 object 解构和值简写。

 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>