删除选择选项onclick

Question

我正在使用以下扩展程序： https://select2.org

这是我的代码：

$('.phoneNumbers').select2({
  tags: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<select class="phoneNumbers">
  <option value="1234">1234</option>
  <option value="5678">5678</option>
</select>

这是我的结果：

但现在我想实现：

每个选项都应该有一个“删除图标”。 如果我点击它，这个选项元素应该被删除。

我在 api 文档中找不到任何关于此的内容。 有什么想法吗？

Answer 1

嗯，看来不是小事。

select2 不允许你窃取点击

我在这里破解了选项

$(document).on("click", ".delete", function(e) {
  const val = $(this).parent()[0].firstChild.textContent;
  $(".phoneNumbers").find("option[value=" + val + "]").remove()
  $('.phoneNumbers').select2("destroy")
  $('.phoneNumbers').select2({
    tags: true,
  })

})


$('.phoneNumbers').select2({
  tags: true,
})

$(".select2-selection__rendered").append("<span class='delete'>X</span>")

/* Select2 reset X 
$('.phoneNumbers').select2({
  tags: true,
  placeholder: 'Please select',
  allowClear: true
});

*/

select {
  width: 35%
}

span.delete {
  color: red;
  display: inline-block;
  float: right
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="phoneNumbers">
  <option value="1234">1234</option>
  <option value="5678">5678</option>
</select>