如何为 select2 列表的每个项目创建一个按钮？

Question

在加载过程中，我需要在 select2 组件中的每个列表项旁边创建一个按钮（视图）。 我没有在网上找到任何可以帮助我的东西。 有人知道怎么做吗？

$("#MySelect2").select2({
    tags: "true",
    createTag: function () {
        // Dessabilita a inserção quando Enter for pressionada
        return null;
    },
    placeholder: "Selecione uma opção",
    allowClear: false,
    width: '100%',
    dropdownParent: genericModal,
    language: {
        noResults: function () {
            return "Nenhum resultado encontrado";
        }
    }
});

<div class="col-md-4">
    <label asp-for="ParentescoTipoId" class="control-label">Tipo de Parentesco</label>
    <select asp-for="ParentescoTipoId" asp-items="Model.ParentescosTipos" id = "MySelect2" title="Selecione uma opção" class="form-control sel-pessoa-fisica-parentesco-parentesco-tipo" style="position: fixed !important;"><option value=""></option></select>
    <span asp-validation-for="ParentescoTipoId" class="text-danger"></span>
</div>

谢谢:)

Answer 1

应该这样做。
您必须使用 templateResult。
因此，可以为每个元素添加一个按钮。
为了唯一性，我添加了一个 data-id 属性。

$(document).ready(function() {
  $('.js-example-basic-single').select2({
    minimumInputLength: -1,
    placeholder: 'Search',
    data: [{
      id: 1,
      text: "First"
    }, {
      id: 2,
      text: "Second"
    }],
    templateResult: function(data) {
      var $result = $("<span></span>");
      console.log('data', data.id);
      $result.text(data.text);
      $result.append('<button data-id="' + data.id + '" class="btn">' + data.text + '</button>');
      return $result;
    }
  });
});

.btn {
  float:right;
}

.js-example-basic-single {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>