Select2选择的值或id

Question

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

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

Answer 1

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

---

编辑

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

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>