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

Posted 2023-05-07

【中文标题】如何为 select2 列表的每个项目创建一个按钮？

【英文标题】：How to create a button for each item of a select2 list?

【发布时间】：2021-10-10 11:29:18

【问题描述】：

在加载过程中，我需要在 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>

谢谢:)

【参考方案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>

【讨论】：

只有一个问题：如果我要创建一个点击事件，它会是什么样子？ @Bernhard Beatus

我为你做了一个小提琴：jsfiddle.net/bogatyr77/ytLhbzmc/5