删除select option 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>

​