如何向 jQuery selectList 插件添加删除按钮

Question

我想删除单击列表项上任意位置以将其删除的默认功能。相反，我想添加一个删除列表项的自定义删除按钮。这是我到目前为止所得到的。

<pre>
var sl = $('select#api_product').selectList({
  instance: true,
  clickRemove: false,
  onAdd: function (select, value, text) {
    $('.selectlist-item').last().after('<span class="delete"></span>');
  }
});
$('<span class="delete"></span>').insertAfter('.selectlist-item').last();
</pre>

使用此代码，我可以删除列表项上的点击目标，并添加具有删除图标的 span 标签作为 bg 图像。但是，我不知道如何在单击 span 标签后删除列表项和选择选项。

Answer 1

我以前没有使用过 selectList，但是快速浏览一下并快速浏览一下 jsfiddle work（我借用了其中一个 selectList 示例），它看起来像是向分类为 ul 的 selectList 添加委托事件处理程序应该是能够照顾它。

一个警告：最简单的选择方法是将 .delete 跨度放在适当的 li 中。我个人认为它也是最接近语义正确的，因为删除“属于”那个特定的li。有几种不同的方法可以处理删除在 li 之外的方法，这应该不难弄清楚，但这对我来说更快地达到工作演示：

var sl = $('select#simple-usage-select-1').selectList({
  instance: true,
  clickRemove: false,
  onAdd: function (select, value, text) {
    $('.selectlist-item').last().append('<span class="delete"></span>');
  }
});

$('.selectlist-list').on('click', '.delete', function(event) {
 sl.remove($(this).parent().data('value'));
});

基本上 selectList 有一个特定的remove(value) 函数，然后删除元素并在列表中取消选择它，您只需要返回到您的 selectList 元素并使用要删除的项目的值调用该删除函数，其中 selectList 通过 data() 存储为值。

我还删除了您的insertAfter，因为这似乎完全没有必要。请注意 onAdd 函数中对“附加”的更改。如果您的 .delete 跨度必须位于以下而不是包含的元素中，您将需要使用同级选择器或在创建跨度时将数据附加到跨度，或使用一些类似的方法。

注意：如果您正在动态创建选择列表，则需要将 .on 附加到包含它们的内容上，并且可能将选择器更改为 '.selectlist-item .delete' 以保持其特定性。