javascript - Select2 值或 id 已选择

Question

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

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

标签： javascriptjquery-select2

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>